纯CSS3制作正方体

最新推荐文章于 2023-03-13 22:43:54 发布

丶帆

最新推荐文章于 2023-03-13 22:43:54 发布

阅读量549

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/yf19990720/article/details/108553848

版权

本文介绍了如何利用CSS3的3D转换特性来制作3D正方体。通过理解rotateX, rotateY和rotateZ函数，结合设置不同角度，可以创建出逼真的正方体效果。文章提供了完整的制作过程及代码示例，为进一步添加动画效果打下基础。" 74906050,6838957,MyBatis入门教程：不使用接口的HelloWorld实践,"['MyBatis', '数据库操作', 'Java开发', '持久层框架']

摘要由CSDN通过智能技术生成

CSS3 3D 转换

3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。
rotateX() x轴旋转，围绕其在一个给定度数X轴旋转的元素。

div
{
   
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

rotateY() y轴旋转，围绕其在一个给定度数Y轴旋转的元素。

div
{
   
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

rotateZ()z轴旋转，围绕其在一个给定度数Z轴旋转的元素。

div
{
   
    transform: rotateZ(130deg);
    -webkit-transform: rotateZ(130deg); /* Safari 与 Chrome */
}

3D正方体

掌握好rotateX,rotateY,rotateZ后，我们就能做出许许多多的3D效果
下面，我们就开始制作正方体
在这里插入图片描述
正方体，由6个面组成，所以线设置6个div

<div class="big">
        <div class="t1">
        </div>
        <div class="t2">
        </div>
        <div class="t3">
        </div>
        <div class="t4">
        </div>
        <div class="t5">
        </div>
        <div class="t6">
        </div>
    </div>

再给最外层div设置3d效果

.big {
   
            position: absolute;
            top: 50%;
            left: 50%;
            transform: rotateY(120deg) rotateX(120deg); //旋转一定角度，让其3d效果看起来更明显
            transform-style: preserve-3d;
        }