css 正方体变化 |css3媒体查询横竖屏

/* CSS代码示例 */
.cube {
width: 100px;
height: 100px;
background-color: #f00;
position: relative;
transform-style: preserve-3d;
animation: rotate-cube 3s linear infinite;
}
@keyframes rotate-cube {
from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

以上代码展示了一个称为cube的CSS类，它的宽高为100像素，背景色为红色，使用position:relative属性定位，同时使用了transform-style:preserve-3d保持3D效果，还定义了一段动画rotate-cube实现360度无限循环旋转的效果。

通过CSS的变换函数，大家可以让正方体在X轴、Y轴和Z轴上旋转。例如，如果大家要让一个正方体沿Z轴顺时针旋转45度，可以使用transform:rotateZ(45deg)。如果大家要让正方体同时绕X轴和Y轴旋转，可以使用transform:rotateX(45deg) rotateY(30deg)。

除了旋转之外，大家还可以使用CSS的translate函数来实现正方体的平移变化，或者使用scale函数实现缩放变化。这些变换函数可以自由组合使用，实现各种立体效果。

总结而言，CSS可以实现许多有趣的应用，正方体变化只是其中的一部分。有了这些强大的工具和技术，大家可以为网页带来更多的交互性、动态性和创意性。