公共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; }
22222
.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
原文地址:https://www.cnblogs.com/lichihua/p/10807088.html
时间: 2024-10-03 13:28:15