css3动画
- transition
- animation：复杂变换 transiton：平滑过渡 过渡名称 过渡时间
- -webkit-transtion：color 1s，height 2s；
- 过渡模式
2. 3d场景
-
- -webkit-perspective:800;
- -webkit-perspective-origin:50% 50%;
- -webkit-transform-style:-webkit-preserve-3d;
- transform变化
- 拉伸translateX Y Z
- 旋转rotateX Y Z
<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .wrapper{ 8 -webkit-prespective: 800; 9 -webkit-perspective-origin: 50% 50%; 创建3d可视窗口，800是深度，50%，50%是视角 10 } 11 .content{ 12 width: 300px; 13 height: 300px; 宽高若不与正方体的宽高一致，正方体转动是会被div所挡住，改变位置。且会出现bug 14 top: 150px; 15 -webkit-transform-style: preserve-3d; 告诉浏览器下面的transform是3d的 16 position: relative; 包含的div是绝对定位 17 margin: 0 auto; 18 -webkit-transition: -webkit-transform .6s; 过渡动画 19 20 } 21 .swq{ 22 width: 300px; 23 height: 300px; 24 background: #584C56; 25 color: white; 26 text-align: center; 27 font-size: 110px; 28 line-height: 300px; 29 height: 300px; 30 position: absolute; 31 32 33 } 34 35 #swq1{ div排布，右手定则判断坐标系 36 -webkit-transform: translateZ(150px); 37 38 } 39 #swq2{ 40 -webkit-transform: translateX(150px) rotateY(90deg); 41 } 42 #swq3{ 43 -webkit-transform: translateZ(-150px) rotateX(-180deg); 44 45 } 46 #swq4{ 47 -webkit-transform: translateX(-150px) rotateY(-90deg); 48 } 49 #swq5{ 50 -webkit-transform: translateY(-150px) rotateX(90deg); 51 52 } 53 54 #swq6{ 55 -webkit-transform: translateY(150px) rotateX(90deg); 56 } 57 58 </style> 59 </head> 60 <body> 61 <div class="wrapper"> 62 <div class="content" id="yu"> 63 <div id="swq1" class="swq">1</div> 64 <div id="swq2" class="swq">2</div> 65 <div id="swq3" class="swq">3</div> 66 <div id="swq4" class="swq">4</div> 67 <div id="swq5" class="swq">5</div> 68 <div id="swq6" class="swq">6</div> 69 </div> 70 <button id="button1" onclick="push(this)">上</button> 71 <button id="button2" onclick="push(this)">下</button> 72 <button id="button3" onclick="push(this)">左</button> 73 <button id="button4" onclick="push(this)">右</button> 74 </div> 75 <script type="text/javascript"> 76 77 var obj; 78 var re=0; 79 var de=0; 80 function push(obj){ 81 var yu=document.getElementById('yu'); 82 switch(obj.id){ 83 case('button1'): 84 re=re+90; 85 yu.style.webkitTransform="rotateX("+re+"deg)"; 86 break; 87 case('button2'): 88 re=re-90; 89 yu.style.webkitTransform='rotateX('+re+'deg)'; 90 break; 91 case('button3'): 92 de=de+90; 93 yu.style.webkitTransform='rotateY('+de+'deg)'; 94 bdeak; 95 case('button4'): 96 de=de-90; 97 yu.style.webkitTransform='rotateY('+de+'deg)'; 98 break; 99 } 100 } 101 102 </script> 103 </body> 104 </html>
自动转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrapper{ -webkit-prespective: 400; -webkit-perspective-origin: 0% 0%; } .content{ width: 300px; height: 300px; top: 150px; -webkit-transform-style: preserve-3d; position: relative; margin: 0 auto; -webkit-transition: -webkit-transform linear 1s; } .swq{ width: 300px; height: 300px; background: #584C56; color: white; text-align: center; font-size: 110px; line-height: 300px; height: 300px; position: absolute; } #swq1{ -webkit-transform: translateZ(150px); } #swq2{ -webkit-transform: translateX(150px) rotateY(90deg); } #swq3{ -webkit-transform: translateZ(-150px) rotateX(-180deg); } #swq4{ -webkit-transform: translateX(-150px) rotateY(-90deg); } #swq5{ -webkit-transform: translateY(-150px) rotateX(90deg); } #swq6{ -webkit-transform: translateY(150px) rotateX(-90deg); } </style> </head> <body> <div class="wrapper"> <div class="content" id="yu"> <div id="swq1" class="swq">1</div> <div id="swq2" class="swq">2</div> <div id="swq3" class="swq">3</div> <div id="swq4" class="swq">4</div> <div id="swq5" class="swq">5</div> <div id="swq6" class="swq">6</div> </div> <button id="button1" onclick="down()">转</button> <button id="button2" onclick="up()">停</button> </div> <script type="text/javascript"> var obj; var re=0; var de=0; var he=0; function down(){ newtime = setInterval("push()",81) } function up(){ clearInterval(newtime) } function push(){ var yu=document.getElementById('yu'); // a=Math.floor(Math.random()*11); a=1; e=Math.random() var b=Math.random(); // if(b>0.5){b=1}else{b=-1}; // var c=Math.random(); // if(c>0.5){c=1}else{c=-1}; // var d=Math.random(); // if(d>0.5){d=1}else{d=-1}; de=de+a/10; re=de+a/10; he=de+a/10; if(e<.33){ yu.style.webkitTransform="rotate3D("+de+", 0 ,"+he+", 900deg)"; }else if(e<0.66){ yu.style.webkitTransform="rotate3D(0 , "+re+",."+he+", 900deg)"; }else{ yu.style.webkitTransform="rotate3D("+de+", "+re+", 0 , 900deg)"; } } </script> </body> </html>
用border width属性 制造出折角效果
红色是显示内容的，
。
