CSS3 transform变换
本文共 1958 字，大约阅读时间需要 6 分钟。
1.transform变换
（1）translate（x,y）设置盒子位移
（2）scale（x,y）设置盒子缩放（3）rotate（deg）设置盒子旋转（4）skew（x-angle,y-angle）设置盒子斜切（5）perspective设置透视距离（6）transform-style flat | preserve-3d 设置盒子是否按3d空间显示（7）translateX,translateY,translateZ 设置三维移动（8）rotateX,rotateY,rotateX 设置三维旋转（9）scaleX，scaleY，scaleZ，设置三维缩放（10）transform-origin 设置变形的中心点（11）backface-visibility 设置盒子背面是否可见<head>
<meta charset="utf-8"><title>翻页动漫</title><style type="text/css">.box{ width: 600px; height: 250px; border: 1px solid #000; margin: 50px auto; position: relative; transform-style: preserve-3d;}.box img{ position: absolute; left: 300px; top: 0px; transform: perspective(800px) rotateY(0deg); transition: all 500ms ease; backface-visibility: hidden;}.box:hover img{ transform: perspective(800px) rotateY(180deg);}.box .back{ width: 224px; height: 224px; background-color: yellow; position: absolute; left: 300px; text-align: center; line-height: 240px; transform: perspective(800px) rotateY(-180deg); transition: all 500ms ease; /*缓冲运动*/ backface-visibility: hidden;}.box:hover .back{ transform: perspective(800px) rotateY(0deg);} </head>
<body>
路飞6666
</body>
例子二：旋转
<head>
<meta charset="utf-8"><title>旋转</title><style type="text/css">.box1,.box2,.box3,.box4,.box5{ width: 100px; height: 100px; margin: 30px; background-color: aquamarine; float: left; transition: all 250ms ease; /*过渡*/}.box1:hover{ transform: rotate(45deg); /*一中心为原点旋转*/}.box2:hover{ transform: rotate(45deg); transform-origin: left center; /*调整中心点*/}.box3:hover{ transform: rotate(45deg); transform-origin: right center;}.box4:hover{ transform: rotate(45deg); transform-origin: top center;}.box5:hover{ transform: rotate(45deg); transform-origin: 50px 50px; /*块为坐标*/} </head>
<body>
</body>
转载于:https://blog.51cto.com/13742773/2336666
你可能感兴趣的文章