CSS3 3D 转换
3D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
rotateX() x轴旋转,围绕其在一个给定度数X轴旋转的元素。
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
rotateY() y轴旋转,围绕其在一个给定度数Y轴旋转的元素。
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}
rotateZ()z轴旋转,围绕其在一个给定度数Z轴旋转的元素。
div
{
transform: rotateZ(130deg);
-webkit-transform: rotateZ(130deg); /* Safari 与 Chrome */
}
制作一个3D六面体的旋转相册
如下图
这个旋转相册由6个面组成,所以,我们先设置6个div
<div class="out">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="p6"></div>
</div>
然后给其添加样式,由于是六边形,所以每个div旋转的角度为120°
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
.out {
position: absolute;
top: 50%;
left: