关于如何使用CSS3制作立方体的问题

最新推荐文章于 2022-09-18 13:59:57 发布

Kobe_G

最新推荐文章于 2022-09-18 13:59:57 发布

阅读量405

点赞数 1

分类专栏： CSS 文章标签：立方体效果 css3 transform

本文链接：https://blog.csdn.net/Kobe_G/article/details/87392403

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

今天给大家带来如何用css3制作立方体效果的案例，话不多说，先上图：
在这里插入图片描述
先说一下网页当中的数轴，以屏幕的左上方为原点：

在这里插入图片描述
重点说一下Z轴，Z轴是垂直于屏幕的，比如我们给一个元素加transform属性，transform:translateZ（100px）;从正面看是没有任何变化的。所以我们不能从正面去看，一般我们想看到立方体效果，都要给box加一个三维空间上的旋转：transform: rotate3d(1,1,1,-60deg);，这样观察才容易看出三维的效果。

对于立方体的六个面，每个面都是通过元素移动+旋转得到的，如果不懂元素的3D移动和旋转可以先去看一下我之前写的博客https://blog.csdn.net/Kobe_G/article/details/87389371里面有介绍3D移动和旋转。

下面附上立方体案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            margin:100px auto;
            position: relative;
            /*让box默认旋转，方便观察*/
            transform: rotate3d(1,1,1,-60deg);
            /*让子元素保留3d变换之后的效果，必须要有*/
            transform-style: preserve-3d;
        }
        .box > div{
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: 0.5;
            transition: transform 2s;
        }
        .front{
            background-color: red;
            transform: translateZ(100px);
        }
        .back{
            background-color: green;
            transform: translateZ(-100px) rotateY(180deg);
        }
        .left{
            background-color: blue;
            /*移动+旋转*/
            transform: translateX(-100px) rotateY(-90deg);
        }
        .right{
            background-color: pink;
            transform: translateX(100px) rotateY(90deg);
        }
        .top{
            background-color: purple;
            transform: translateY(-100px) rotateX(90deg);
        }
        .bottom{
            background-color: orange;
            transform: translateY(100px) rotateX(-90deg);
        }

        /*.box:hover div{*/
            /*transform: none;*/
        /*}*/
    </style>
</head>
<body>
<div class="box">
    <div class="front">front</div>
    <div class="back">back</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</div>
</body>
</html>

另外我们还可以通过transform来实现立方体变换的效果，比如我们把上方注释掉的css代码打开，就会有如下的效果：
在这里插入图片描述
不懂的欢迎大家在下方留言，看到后会回复。

Kobe_G

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于如何使用CSS3制作立方体的问题

今天给大家带来如何用css3制作立方体效果的案例，话不多说，先上图：先说一下网页当中的数轴，以屏幕的左上方为原点：重点说一下Z轴，Z轴是垂直于屏幕的，比如我们给一个元素加transform属性，transform:translateZ（100px）;从正面看是没有任何变化的。所以我们不能从正面去看，一般我们想看到立方体效果，都要给box加一个三维空间上的旋转：transform: rota...
复制链接

扫一扫