css3 三大王 transition , transform , animation

三大王  transition : 过渡     , transform : 变形  ,   animation ： 动画

　　　　1.transform  变形                               

　　　　　　任何的变形都可以被过渡   ， 一个transform写多个用空格隔开 ，分开写可能会被覆盖,

　　　　　　想要实现3d效果要给父元素添加景深 eg:  perspective:500px; perspective-origin

　　　　　　<1> transform: rotate(90deg)  

　　　　　　　　 意思是顺时针‘旋转’ 90度   ，  deg是单位度    可以是负数  , rotateX(45deg)x轴旋转45度,正向后，负向前， rotateY 同理,配合 transform-origin:0% 0px; 两个参数表示x ，y轴的最大景深 

　　　　　　<2>transform:scale(0.1，0.1)           意思是缩放0.1倍  ，两个参数分别是x，y轴的缩放倍数，也可以拆开写 scaleX ，scaleY   、

　　　　　　<3>transform:skew(10deg,10deg)    意思是把元素斜切，好似把正方形变成平行四边形  ，两个参数分别是 x轴斜切的度数，y轴斜切的度数，也可以拆开写 skewX，skewY

　　　　　<4>transform:translateX(300px);    意思是 从x轴 移动300px    还可以是    translateY   ，Z   

　　　　　　　　transform:translate3D(100px,200px,300px);

　　　　　<5> transform-style:preserve-3d;　　当一个组合体（内部有3D），自己要进行旋转，那么一定要加上这个属性，加上之后内部的小元素的3D变化将保留

　　　　　　　　

　　　　　　eg！：

　　　　　　　　　　背面不可见

1 backface-visibility:hidden;

 

　　　　　　　　　　像两张扑克牌背靠背贴在一起，baby从-180 → 0  ，  xiaoming从0 → 180

1 <div> 2  <img class="baby" src="images/baby.png" alt="" /> 3  <img class="xiaoming" src="images/xiaoming.png" alt="" /> 4 </div>

 

　　　　2.trasotion   过渡      值得注意的是   过渡需要准备时间！！

 　　　　　　　　transition:all 1s ease 0s;   很简单  效率高   很好用 

 　　　　3.animation 

　　　　　使用动画必须先@-webkit-keyframes 定义动画  指的是关键帧  只需要定义初始样和结果样 

　　　　　在一个元素内调用  animation    

　　　　　　　　　　animation: GOGO 10s linear 0s 10 alternate forwards;       

　　 // 参数GoGo 动画的名字，自定义  ，10s 动画的总共长度，linear动画的缓存效果  ，os延迟时间，如果进行多次 仅第一次延时，10代表运动次数 infinite代表无限次  alternate代表是否来回运动，如果写了就是要来回运动  ， forwards 代表运动后是否留在原地  ，写了代表留在原地

　　　　动画的定义1 ：  意思是动画进行到多大程度产生变化

　　　　　@-webkit-keyframes GOGO{   

　　　　　　0%{

　　　　　　　　　　// 这里写变化的量 

　　　　　　}

　　　　　　50%{

　　　　　　}

　　　　　　100%{

　　　　　　}

　　　　}

　　　　动画定义2 ：form to 从什么变成什么

　　　　　　@-webkit-keyframe GOGO{

　　　　　　　　form{

　　　　　　　　}

　　　　　　　　to{

　　　　　　　　}

　　　　　　}