css3 3D变换和动画
2015-10-17 10:17
603 查看
3D变换和动画
建立3D空间,transform-style: preserve-3dperspective: 100px; 景深
perspective-origin:center center -180px; 景深基点
transform新增函数如下:
rotateX();
rotateY();
rotateZ();
translateZ();
scaleZ();
3d动画demo,只支持Webkit内核,可自行运行查看效果
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .wrap { width: 100px; height: 100px; -webkit-perspective: 200px; border: 5px solid pink; padding: 100px; margin: 200px auto 0; -webkit-transform: scale(2);} #box {width: 100px; height: 100px; position: relative; text-align: center; line-height: 100px; -webkit-transform-style: preserve-3d; transition: 3s; -webkit-transform-origin: center center -50px;} #box div {width: 100px; height: 100px; position: absolute; font-size: 50px; color: #FFF;} #box div:nth-of-type(1) {background-color: #F90; left: 0px; top: 0px;} #box div:nth-of-type(2) {background-color: #E08; left: 0px; top: -100px; -webkit-transform-origin: bottom; -webkit-transform: rotateX(90deg);} #box div:nth-of-type(3) {background-color: #A01; left: -100px; top: 0px; -webkit-transform-origin: right; -webkit-transform: rotateY(-90deg);} #box div:nth-of-type(4) {background-color: #CC0; left: 100px; top: 0px; -webkit-transform-origin: left; -webkit-transform: rotateY(90deg);} #box div:nth-of-type(5) {background-color: #D34; left: 0px; top: 100px; -webkit-transform-origin: top; -webkit-transform: rotateX(-90deg);} #box div:nth-of-type(6) {background-color: #000; left: 0px; top: 0px; -webkit-transform: translateZ(-100px) rotateX(180deg);} .wrap:hover #box{-webkit-transform: rotateX(360deg);} </style> <script> window.onload = function() { var oBox = document.getElementById("box"); oBox.style.WebkitTransform = "rotateX(360deg)"; addEnd(oBox, end1); function end1() { addEnd(oBox, end2); oBox.style.WebkitTransform = "rotateX(0deg)"; } function end2() { addEnd(oBox, end3); oBox.style.WebkitTransform = "rotateY(360deg)"; } function end3() { oBox.style.WebkitTransform = "rotateY(0deg)"; } function addEnd(obj, fn) { obj.addEventListener('WebkitTransitionEnd', fn, false); obj.addEventListener('transitionend', fn, false); } function removeEnd(obj, fn) { obj.removeEventListener('WebkitTransitionEnd', fn, false); obj.removeEventListener('transitionend', fn, false); } }; </script> </head> <body> <div class="wrap"> <div id="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </body> </html>
相关文章推荐
- css兼容问题
- CSS基础
- css less编译工具 gulp-less
- css less学习 变量
- 详解css3弹性盒模型(Flexbox)
- QTabWidget添加自定义样式
- css中关于div中文本垂直居中的问题。
- ios-Label中显示多种样式的字体
- 利用好CSS,实现Qt控件美化
- 项目中对模板和js,css文件进行压缩的处理类
- css3 多列显示属性column
- css filter详解
- JS动态引入js,CSS——动态创建script/link/style标签
- 使用netDxf将ArcGIS空间数据按指定样式导出CAD文件
- CSS实现文字内容不被截断当超出指定长度时该字符串自动整体换到下一行
- 前端CSS颜色代码大全
- dialog里面实现自定义样式单选按钮功
- WPF ComboBox样式
- 怎么用CSS设置div里面的table水平居中
- Css圆角边框