CSS3旋转及动画
一、CSS3转换
1、元素的2D转换
1 transform:none;/*不进行转换*/ 2 transform:translate(x,y);/*定义2dD转换，移动*/ 3 transform:translate3d(x,y,z);/*定义3D转换*/ 4 transform:tranlateX(value);/*使用x轴的值转换*/ 5 transform:tranlateY(value);/*使用y轴的值转换*/ 6 transform:scale(value);/*2D缩放*/ 7 transform:scale3D(value1,value2,value3);/*3D缩放*/ 8 transform:skew(x-angle,y-angle);/*沿着 X 和 Y 轴的 2D 倾斜转换*/ 9 transform:rotate(angle);/* 2D 旋转，在参数中规定角度*/ 10 transform:rotateX(angle); /*沿着 X 轴的 3D 旋转*/ 11 transform:rotateY(angle); /*沿着 Y 轴的 3D 旋转*/ 12 transform:rotateZ(angle); /*沿着 Z 轴的 3D 旋转*/
2、元素的过渡效果
（1）transition-property 指定CSS属性的name，transition效果
（2）transition-duration 需要指定多少秒或毫秒才能完成
（3）transition-timing-function 转速曲线
其值有：linear（匀速）、ease（先慢后快）、ease-in（以慢速开始）、ease-out（以慢速结束）、ease-in-out（以慢速开始和结束）
（4）transition-delay 定义transition效果开始的时候
3、案例：（翻转导航栏）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 ul>li{ 8 position: relative; 9 list-style: none; 10 float: left; 11 margin-left: 15px; 12 width: 80px; 13 height: 30px; 14 text-align: center; 15 line-height: 30px; 16 17 } 18 ul>li:hover{ 19 transform: rotateX(90deg); 20 transform-style: preserve-3d; 21 transition: all 1s linear; 22 /* transform: rotate3d(30deg,30deg,30deg); */ 23 } 24 .box1,.box2{ 25 position: absolute; 26 width: 80px; 27 height: 30px; 28 } 29 .box1{ 30 background-color: #FAEBD7; 31 transform: translateZ(15px); 32 } 33 .box2{ 34 background-color: #ADFF2F; 35 transform: translateY(15px) rotateX(-90deg); 36 } 37 </style> 38 </head> 39 <body> 40 <ul> 41 <li> 42 <div class="box1">1</div> 43 <div class="box2">首页</div> 44 </li> 45 <li> 46 <div class="box1">2</div> 47 <div class="box2">首页</div> 48 </li> 49 <li> 50 <div class="box1">3</div> 51 <div class="box2">首页</div> 52 </li> 53 <li> 54 <div class="box1">4</div> 55 <div class="box2">首页</div> 56 </li> 57 <li> 58 <div class="box1">5</div> 59 <div class="box2">首页</div> 60 </li> 61 62 </ul> 63 </body> 64 </html>
二、动画
1、
1 @keyframes animationName{ 2 from{} 3 to{} 4 }
2、属性
animation 所有动画属性的简写属性
1 animation-name;/*指定要绑定到选择器的关键帧的名称*/ 2 animation-duration;/*设置动画将如何完成一个周期*/ 3 animation-delay/*设置动画在启动前的延迟间隔*/ 4 animation-iteration-count/*定义动画的播放次数 infinite 无限次*/ 5 animation-direction/*指定是否应该轮流反向播放动画*/ 6 animation-fill-mode/*规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放 7 时），要应用到元素的样式*/ 8 animation-play-state/*指定动画是否正在运行或已暂停*/
3、案例：（相册）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 body{ 8 perspective: 1800px; 9 } 10 .box{ 11 position: relative; 12 margin: 120px auto; 13 width: 500px; 14 height: 500px; 15 transform-style: preserve-3d; 16 animation: rotate 10s infinite linear; 17 /* border: 4px solid black; */ 18 } 19 .box:hover{ 20 animation-play-state:paused 21 } 22 .box1{ 23 position: absolute; 24 top: 0; 25 left: 0; 26 width: 500px; 27 height: 300px; 28 background-image: url(img/k.jpg); 29 background-size: cover; 30 31 } 32 @keyframes rotate{ 33 from{ 34 transform: rotateX(-10deg) rotateY(0deg) 35 } 36 to{ 37 transform: rotateX(-10deg) rotateY(360deg) 38 } 39 } 40 .box>.box1:nth-child(1){ 41 transform: translateZ(450px) ; 42 } 43 .box>.box1:nth-child(2){ 44 transform:rotateY(60deg) translateZ(450px) ; 45 } 46 .box>.box1:nth-child(3){ 47 transform: rotateY(120deg) translateZ(450px) ; 48 } 49 .box>.box1:nth-child(4){ 50 transform:rotateY(180deg) translateZ(450px) ; 51 } 52 .box>.box1:nth-child(5){ 53 transform:rotateY(240deg) translateZ(450px) ; 54 } 55 .box>.box1:nth-child(6){ 56 transform:rotateY(300deg) translateZ(450px) ; 57 } 58 59 </style> 60 </head> 61 <body> 62 <div class="box"> 63 <div class="box1"></div> 64 <div class="box1"></div> 65 <div class="box1"></div> 66 <div class="box1"></div> 67 <div class="box1"></div> 68 <div class="box1"></div> 69 </div> 70 </body> 71 </html>