css3d旋转色子

CSS3D旋转色子是一种需要CSS的3D技术来制作的有趣的特效。您可以通过一些简单的代码使用CSS3D旋转色子将您的网站变得更加生动。

.cube {
    height: 150px;
    width: 150px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(45deg) rotateY(45deg);
    transform: rotateX(45deg) rotateY(45deg);
}
.cube .side {
    box-sizing: border-box;
    position: absolute;
    height: 150px;
    width: 150px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
}
.cube .side1 {
    transform: translateZ(75px);
    background-color: red;
}
.cube .side2 {
    transform: translateX(75px) rotateY(90deg);
    background-color: blue;
}
.cube .side3 {
    transform: translateY(-75px) rotateX(90deg);
    background-color: green;
}
.cube .side4 {
    transform: translateZ(-75px) rotateY(180deg);
    background-color: yellow;
}
.cube .side5 {
    transform: translateX(-75px) rotateY(-90deg);
    background-color: purple;
}
.cube .side6 {
    transform: translateY(75px) rotateX(-90deg);
    background-color: orange;
}
    

上面的CSS代码是旋转色子的关键。.cube类设置立方体大小和位置，以及3D变换。.side类设置每个面的大小、位置、范围和颜色。结果是一个功能性的3D色子效果。

将以上的代码应用到您的HTML& Style页面中，你将会看到一个奇妙的3D旋转色子效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！