前端——旋转的3D立方体

最新推荐文章于 2022-08-12 23:10:39 发布

tingyu_

最新推荐文章于 2022-08-12 23:10:39 发布

阅读量613

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/tingyu_/article/details/107641620

版权

web前端专栏收录该内容

15 篇文章 3 订阅

订阅专栏

来搭建立方体吧~~

先将6个面做出来：

六个面的立方体，只需要在ul中包裹六个li就可以了

<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</body>

给外面盒子加上边框，给立方体的每一个点定位加颜色：


            *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 50px auto;
        }
        .box ul{
            width: 100px;
            height: 100px;
            margin: 100px;
            position: relative;
        }
        .box ul li{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            position: absolute;
            font-size: 26px;
            color: white;
        }
        .box ul li:nth-child(1){
            left: 0;
            top: 0;
            background-color: chartreuse;
        }
        .box ul li:nth-child(2){
            left: -100px;
            top: 0;
            background-color: brown;
        }
        .box ul li:nth-child(3){
            left: 100px;
            top: 0;
            background-color: pink;
        }
        .box ul li:nth-child(4){
            left: 0;
            top: -100px;
            background-color: chocolate;
        }
        .box ul li:nth-child(5){
            left: 0;
            top: 100px;
            background-color: skyblue;
        }
        .box ul li:nth-child(6){
            left: 0;
            top: 0;
        }

立方体就是将这六个面进行旋转，然后拼起来的，

我们将面1作为前面，进行旋转，那么将上下左右面旋转过后，这四个面都是朝里的：
面2：沿着右边线往里翻，其实就是将旋转中心设置为右边线，沿着Y轴逆时针旋转90度，（旋转角度的判断）

面3：沿着左边线往里翻，其实就是将旋转中心设置为左边线，沿着Y轴顺时针旋转90度；

面4：沿着下边线往里翻，其实就是将旋转中心设置为下边线，沿着X轴顺时针旋转90度；

面5：沿着上边线往里翻，其实就是将旋转中心设置为上边线，沿着X轴逆时针旋转90度；

面6：沿着Z轴往里走100个像素，就是沿着Z轴移动-100px。

效果：

CSS：

.box ul li:nth-child(1){
            left: 0;
            top: 0;
            background-color: chartreuse;
        }
        .box ul li:nth-child(2){
            left: -100px;
            top: 0;
            background-color: brown;
            transform-origin: right;
            transform: rotateY(-90deg);
        }
        .box ul li:nth-child(3){
            left: 100px;
            top: 0;
            background-color: pink;
            transform-origin: left;
            transform: rotateY(90deg);
        }
        .box ul li:nth-child(4){
            left: 0;
            top: -100px;
            background-color: chocolate;
            transform-origin: bottom;
            transform: rotateX(90deg);
        }
        .box ul li:nth-child(5){
            left: 0;
            top: 100px;
            background-color: skyblue;
            transform-origin: top;
            transform: rotateX(-90deg);
        }
        .box ul li:nth-child(6){
            left: 0;
            top: 0;
            background-color: #678;
            transform: translateZ(-100px);
        }

此时这六个面已经构成了一个立方体，但是我们该如何看到呢？

》》1.我们可以给这个立方体加一个“照相机”，照相机将它看到的东西再呈现给我们，

照相机离这个立方体的距离，叫做景深，用perspective: 200px;来设置，200px就是这个距离

》》2，将这个立方体放在3D空间内：transform-style: preserve-3d;

》》3.此时，我们仍然是只能看到一个面的，是因为我们的“照相机”是正对着立方体放置的，换个位置试试： perspective-origin: top right; 将“照相机”放在右上角，就可以看到了。

CSS：

.box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 50px auto;
            /* 观看基点距离屏幕的z轴的距离 */
            perspective: 200px;
            /* 观看基点 */
            perspective-origin: top right;
        }
        .box ul{
            width: 100px;
            height: 100px;
            margin: 100px;
            position: relative;
            /*3D空间*/
            transform-style: preserve-3d;
        }

效果图：

剩下的就是将立方体动起来了。

沿着Y轴旋转的立方体：效果如下：

鼠标移入框框，3D立方体沿着y轴旋转

需要设置旋转方式、旋转时间、旋转基点、

为了美观呢，可以将6个面做一下透明处理，只加opacity的话，后面的面看也可以看到，这个时候，需要可以加backface-visibility: hidden; 隐藏一下。

        .box ul{
            width: 100px;
            height: 100px;
            margin: 100px;
            position: relative;
            /*3D空间*/
            transform-style: preserve-3d;
            /* 鼠标移入时的旋转时间 */
            transition: 2s;
            /* 旋转基点 */
            transform-origin: center center -50px;
        }
        .box ul li{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            position: absolute;
            font-size: 26px;
            color: white;
            /* 每一个li都加一个透明 */
            opacity: 0.5;
            /* 但是看不到后面的 */
            backface-visibility: hidden;
        }
        .box:hover ul{
            /* transform: rotate3d(1,1,1,360deg); */
            transform: rotateY(360deg);
        }

tingyu_

关注

1
点赞
踩
3

收藏

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

来搭建立方体吧~~先将6个面做出来：六个面的立方体，只需要在ul中包裹六个li就可以了<body> <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li>
复制链接

扫一扫