css3

CSS3 变形   

 旋转   rotate（）           -webkit-transform: rotate(-10deg);

正值顺时针旋转      负值逆时针旋转    参考中心点旋转

-webkit-transform-origin:left bottom;   改变旋转中心点   left可换位百分比跟像素-webkit-transform-origin:30% bottom;

单位   可以使用单词   像素    百分比

平移      -webkit-transform: translate(100px,100px);

  translateX( )   translateY( )   translate(X ,Y)  参考左上角  只有一个值且没标明方向 为X轴

 

扭曲     skew( )  单位为角度   skewX( )  skew Y（ ）    skew( X,Y) 正值 X向左倒   Y向下倒

           只有一个值时候作用于想X轴

缩放      scaleX( )   scaleY( )   scale( X, Y)  没有单位数值为倍数   -webkit-transform: scale(2,2);   只有一个值为X和Y

0~1是缩小    1以后是放大  一般都为正值   取值范围为0~正无穷

当变形出现两个或者两个以上，语句书写顺序会导致结果不同

三维

三维申明

-webkit-transform-style: preserve-3d; 说明为3D 布局

-webkit-perspective :  800；视距

旋转 rotate3d(x, y, z, deg) rotateX（） rotateY（)  rotateZ( )    rotate3d(1, 0, 1, 30deg)    1 为选中   0 为不选   30deg度

平移 translate3d(x, y, z)   translateX(  )   translateY(   )   translateZ（）

缩放  scale3d(x, y, z)   scaleX( )  scaleY( )  scaleZ( )

扭曲   无3D

过渡

过渡属性

需要过渡属性     过渡时间    过渡动画类型      过渡延迟时间

过渡

过渡属性

需要过渡属性     过渡时间    过渡动画类型      过渡延迟时间

 

缩写： transition: all 1s linear 0.5s ;  all 是所有属性      1s 为过度事件    linear 为过度方式    0.5s 为延迟时间

动画：

 

 看完觉得有收获，请点赞。有错得地方帮忙留言指出来，我好改正。谢谢