通过使用transform对元素进行变形等相关操作，可以使元素的效果更加生动，下面就来介绍一下transform具体的一些属性。
1、平移 translate
translateX（）：沿着x轴方向平移；
translateY（）：沿着y轴方向平移；
translateZ（）：沿着z轴方向平移。
其中，有两个特殊值：
translateX（-50%）：水平居中；
translateY（-50%）：垂直居中；
二、旋转 rotate
rotateX（）：沿着x轴方向旋转；
rotateY（）：沿着y轴方向旋转；
rotateZ（）：沿着z轴方向旋转；
当然也可以直接使用rotate（）指定角度将元素进行旋转，值为正数表示顺时针旋转，值为负数表示逆时针方向旋转。
三、缩放 scale
scaleX（）：水平方向缩放；
scaleY（）：垂直方向缩放。
也可以为其直接设置两个值，实现水平方向和垂直方向同时缩放；
立方体动画效果代码展示：
<body>
<div class="cube">
<div class="b1">
<img src="/images/06.jpg" alt="">
</div>
<div class="b2">
<img src="/images/07.jpg" alt="">
</div>
<div class="b3">
<img src="/images/08.jpg" alt="">
</div>
<div class="b4">
<img src="/images/09.jpg" alt="">
</div>
<div class="b5">
<img src="/images/10.jpg" alt="">
</div>
<div class="b6">
<img src="/images/11.jpg" alt="">
</div>
</div>
</body>
<style>
html{
perspective: 800px;
}
.cube{
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateZ(30deg);
margin: 0 auto;
margin-top: 200px;
}
.cube:hover{
animation: rotate 10s linear;
}
.cube>div{
position: absolute;
}
img{
width: 200px;
height: 200px;
vertical-align: top;
}
.b1{
transform: rotateY(90deg) translateZ(100px);
}
.b2{
transform: rotateY(-90deg) translateZ(100px);
}
.b3{
transform: rotateX(90deg) translateZ(100px);
}
.b4{
transform: rotateX(-90deg) translateZ(100px);
}
.b5{
transform: rotateY(180deg) translateZ(100px);
}
.b6{
transform: rotateY(0deg) translateZ(100px);
}
@keyframes rotate{
from{
transform: rotateX(0) rotateZ(0);
}
to{
transform: rotateX(360deg) rotateZ(360deg);
}
}
</style>
效果展示：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
