<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { perspective: 500px; } .q { position: relative; margin: 100px auto; width: 200px; height: 300px; transition: all 10s; transform-style: preserve-3d; } .q:hover { transform: rotateY(360deg); } .q div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: pink; } .q div:nth-child(2) { position: absolute; top: 0; left: 0; background-color: #1ba1e6; transform: rotateX(30deg); } .q div:nth-child(3) { position: absolute; top: 0; left: 0; background-color: #40b83f; transform: rotateX(-30deg); } </style> </head> <body> <div class="q"> <div></div> <div></div> <div></div> </div> </body> </html>
3D旋转和呈现综合小练习
这篇博客展示了如何使用CSS3的`transform`和`perspective`属性创建一个3D翻转效果。通过设置不同的角度,实现了元素在Y轴上的360度旋转,以及两个侧面的倾斜展示。示例中包含一个粉色背景的盒子,以及两个分别以蓝色和绿色倾斜显示的侧面。这是一个关于前端开发,特别是CSS3动画和3D变换的实例教程。
摘要由CSDN通过智能技术生成