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 为延迟时间
动画:
看完觉得有收获,请点赞。有错得地方帮忙留言指出来,我好改正。谢谢