css3 立体旋转-CSS3实现3D水晶六面体疗效

点击右上角白色按钮，关注“网络秀”，让你真正秀起来

前言

前段时间写了一篇文章《CSS3实现漂亮的图片倒影效果》。 上面的最后一步是“我们将反射倾斜一定角度，使整个反射效果更加立体”。 可以制作六面体吗？ ？ ？

明天我们将使用纯CSS制作一个六面体。 主要用到的知识是transform:rotate。 如果不明白，可以点击下面的文章来了解：《CSS3中的过渡和变换很愚蠢且不清楚》

疗效预览：

CSS3实现3D水晶六面体疗效

分析

六面体是由6个面组成的，所以我们主要操作6个面，将它们组合成一个六面体。

观察者的方向为z轴正方向

观察者的方向为z轴正方向

rotateX3D空间旋转指定角度，并沿垂直于X轴的方向顺时针旋转。 rotateY3D空间旋转指定角度，并沿垂直于Y轴的方向顺时针旋转。 rotateZ3D空间旋转指定角度css3 立体旋转，并沿垂直于Z轴的方向顺时针旋转。

第一步——画出正面和背面2个面

CSS3实现3D水晶六面体疗效

对于下面的样式，我们将整个包沿着垂直于X轴的方向逆时针旋转30°，并将Y轴逆时针旋转80°。 上部元素的Z轴位移100pxcss3 立体旋转，前面元素的Z轴位移-100px，Y轴顺时针旋转。 旋转 180°。 使疗效看起来更清晰，有立体错位感。

/*最外层容器样式*/ 
.wrap{ 
 width: 200px; 
 height: 200px; 
 margin: 150px auto; 
 position: relative; 
 
} 
/*包裹所有容器样式*/ 
.cube{ 
 width: 200px; 
 height: 200px; 
 margin: 0 auto; 
 /*preserve-3d 使其子元素具有3D效果*/ 
 transform-style: preserve-3d; 
 transform: rotateX(-30deg) rotateY(-80deg); 
} 
 
.cube div{ 
 position: absolute; 
 width: 200px; 
 height: 200px; 
 opacity: 0.8; 
} 
.cube .before{ 
 transform: rotateY(0deg) translateZ(100px); 
 background: red; 
} 
.cube .after{ 
 transform: translateZ(-100px) rotateY(180deg); 
 background: blue; 
}

第2步 - 画出左脸和右脸

和第一步类似，两个面也旋转位移，这样就可以完美拼接了

CSS3实现3D水晶六面体疗效

添加样式

.cube .left{ 
 transform: rotateY(90deg) translateZ(100px); 
 background: green; 
} 
.cube .right{ 
 transform: rotateY(-90deg) translateZ(100px); 
 background: yellow; 
}

第 3 步 - 画上表面和下表面

以此类推，完成上下表面。

CSS3实现3D水晶六面体疗效

添加样式

.cube .top{ 
 transform: rotateX(90deg) translateZ(100px); 
 background: purple; 
} 
.cube .bottom{ 
 transform: rotateX(-90deg) translateZ(100px); 
 background: pink; 
}

第 4 步 - 美化

我们为每个面添加背景图像，然后旋转整个包，以便我们可以看到每个面的内容。

添加样式

.pic{ 
 width: 200px; 
 height: 200px; 
} 
@-webkit-keyframes rotate{ 
 from{ 
 transform: rotateX(0deg) rotateY(0deg); 
 } 
 to{ 
 transform: rotateX(360deg) rotateY(360deg); 
 } 
} 
.cube{ 
 width: 200px; 
 height: 200px; 
 margin: 0 auto; 
 transform-style: preserve-3d; 
 transform: rotateX(-30deg) rotateY(-80deg); 
 -webkit-animation: rotate 20s infinite; 
 animation-timing-function: linear; 
}

最终疗效图：

CSS3实现3D水晶六面体疗效

公告