标签：ack val inf .com scale ali span 逆时针 cal
公共css
.common{ width:100px; height:100px; margin:20px auto; background-color:#75C934; text-align:center; line-height:100px; font-size:18px; }
1）transform:rotate(value); 元素旋转 value为旋转度数
默认顺时针旋转。
value若为负值则逆时针旋转。
.box{ /*过渡效果*/ -webkit-transition: transform 0.8s; } .box:hover{ /*旋转80°*/ transform:rotate(80deg); }
2）transform:skew(value);元素倾斜
value(值)为倾斜度数，例：30deg。
value只有一个值，横向默认向左倾斜；有两个值，第二个值纵向默认向上倾斜。
value若为负值则反方向倾斜。
.box{ /*过渡效果*/ -webkit-transition: transform 0.8s,border-radius 0.8s; border-radius:30px; } .box:hover{ transform:skew(20deg,20deg); border-radius:0px; }
3）transform:scale();元素缩放
value(值)为缩放倍数，例：2。
value只有一个值，默认整体缩放；有两个值，第一个值横向缩放，第二个值纵向缩放。
value值大于1放大，小于1大于0缩小，负值则反向缩放(元素呈镜像)
.box{ -webkit-transition: transform 0.8s,border-radius 0.8s; } .box:hover{ transform:scale(2,0.8); border-radius:40px; }
.box{ -webkit-transition: transform 0.8s,border-radius 0.8s; } .box:hover{ transform:scale(2,-0.8); border-radius:40px; }
图片缩放效果
.scale{ width:234px; height:120px; overflow: hidden; transform:rotate(0deg); } .scale img:hover{ transform:scale(1.2,1.2); transition: 1s }
4）transform:translate();元素位移
value(值)为位移像素，例：5px。
value只有一个值，横向默认向右移动；有两个值，第二个值纵向默认向下移动。
value若为负值则反方向移动。
.box{ -webkit-transition: transform 0.3s,box-shadow 0.3s; } .box:hover{ transform:translate(-3px,-3px); box-shadow:3px 3px 5px 0px #000; }
前置属性：
transform-origin
transform-style
perspective
perspective-origin
backface-visibility
2D变形：
translate
scale
rotate
skew
matrix
3D变形：
translate3d
scale3d
rotate3d
matrix3d
标签：ack val inf .com scale ali span 逆时针 cal
原文地址：https://www.cnblogs.com/lichihua/p/10807088.html
