3D变化——旋转的立方体

最新推荐文章于 2022-06-27 08:35:09 发布

sinat_33441740

最新推荐文章于 2022-06-27 08:35:09 发布

阅读量3.3k

点赞数 3

分类专栏： HTML 文章标签： 3d html

本文链接：https://blog.csdn.net/sinat_33441740/article/details/52289997

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习了一段时间的html，前两天学习了3d动画，实现了立方体的旋转，其实实现立方体旋转的方法有好多种，我们今天只说一种方法（是我认为比较简单的一种）

用到的知识点：

定位
3d旋转
过渡（鼠标点击开始旋转）

首先我们应该先搭建一个立方体，用定位把六个面重叠在一起，然后应用旋转把立方体撘建起来，下面我们来看具体实现的代码

1、首先写六个面，重叠在一起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .warp {
            width: 200px;
            height: 200px;
            position: relative;
            top:0;right:0;
            bottom: 0;left: 0;
            margin:300px auto;

        }
        .div_1,.div_2,.div_3,.div_4,.div_5,.div_6 {
            /*六个面的长宽*/
            width: 200px;
            height:200px;
            background: cyan;
            opacity: 0.5;
            /*设定字体大小、颜色、水平竖直居中*/
            font-size:30px;
            color: white;
            text-align: center;
            line-height: 200px;
            /*设置绝对定位*/
            position: absolute;

        }
    </style>
</head>
<body>
    <div class="warp">
        <!-- .div_$*6 -->
        <div class="div_1">1</div>
        <div class="div_2">2</div>
        <div class="div_3">3</div>
        <div class="div_4">4</div>
        <div class="div_5">5</div>
        <div class="div_6">6</div>
    </div>
</body>
</html>

效果如下图所示：
这里写图片描述
2、旋转成立方体

2.1首先打开3d渲染效果和景深

.warp {
            width: 200px;
            height: 200px;
            position: relative;
            top:0;right:0;
            bottom: 0;left: 0;
            margin:300px auto;
            /*3d渲染效果和景深*/
            transform-style:preserve-3d;
            perspective:1000px;
        }

2.2 然后每个面旋转一定的角度

.div_1 {
            /*上面*/
            -webkit-transform:rotateX(90deg) translateZ(100px);
        }
        .div_2 {
            /*下面*/
            -webkit-transform:rotateX(-90deg) translateZ(100px);
        }
        .div_3 {
            /*左面*/
            -webkit-transform:rotateY(90deg) translateZ(100px);
        }
        .div_4 {
            /*右面*/
            -webkit-transform:rotateY(-90deg) translateZ(100px);
        }
        .div_5 {
            /*后面*/
            -webkit-transform:translateZ(-100px);
        }
        .div_6 {
            /*前面*/
            -webkit-transform:translateZ(100px);
        }

3、实现旋转
3.1 给warp一个过渡

.warp {
            width: 200px;
            height: 200px;
            position: relative;
            top:0;right:0;
            bottom: 0;left: 0;
            margin:300px auto;
            transform-style:preserve-3d;
            perspective:1000px;
            /*过渡*/
            transition:all 5s;
        }

3.2给warp一个hover点击事件

.warp:hover {
            -webkit-transform:rotateX(720deg) rotateY(720deg);
        }

最终效果就实现了，如下图：

这里写图片描述
可是我们发现他并不是一个真正的立方体，有点像棱台。其实这是“景深”惹的祸，我们只要把把景深关了，就发现它恢复正常了。

最后，如果想让立方体分开，其实，在点击的时候让每个面加一个位移就可以实现了。

好了，今天就先说到这里吧…

sinat_33441740

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
3D变化——旋转的立方体

学习了一段时间的html，前两天学习了3d动画，实现了立方体的旋转，其实实现立方体旋转的方法有好多种，我们今天只说一种方法（是我认为比较简单的一种）用到的知识点：定位3d旋转过渡（鼠标点击开始旋转）首先我们应该先搭建一个立方体，用定位把六个面重叠在一起，然后应用旋转把立方体撘建起来，下面我们来看具体实现的代码1、首先写六个面，重叠在一起<!DOCTYPE html><html lang="
复制链接

扫一扫