.cube { width: 200px; height: 200px; margin: 50px auto; position: relative; transform-style: preserve-3d; perspective: 600px; } .cube div { position: absolute; width: 200px; height: 200px; background-color: #4CAF50; border: 2px solid #fff; } .front { transform: translate3d(0, 0, 100px); } .back { transform: translate3d(0, 0, -100px) rotateY(180deg); } .right { transform: translate3d(100px, 0, 0) rotateY(90deg); } .left { transform: translate3d(-100px, 0, 0) rotateY(-90deg); } .top { transform: translate3d(0, -100px, 0) rotateX(90deg); } .bottom { transform: translate3d(0, 100px, 0) rotateX(-90deg); }
首先，大家需要一个包含6个面的容器，即
。大家为每个面添加单独的div元素，并利用CSS3的transform属性来使其变得立体化。transform: translate3d(x, y, z)用于将元素沿着x, y和z轴移动。rotateX(angle)和rotateY(angle)用于使元素绕着x和y轴旋转。perspective用于设置透视距离，从而呈现出更真实的立体效果。
通过上述代码，大家可以得到一个漂亮的立体正方形。你可以根据自己的需求进行调整，例如改变背景颜色、边框大小等等。CSS3提供了很多有趣的属性，让大家的网页变得更加丰富多彩。