3D盒子效果以及遇到的bug

最新推荐文章于 2020-12-19 10:30:07 发布

Mrlonely思考笔记

最新推荐文章于 2020-12-19 10:30:07 发布

阅读量392

点赞数

分类专栏： h5c3 文章标签：前端动画

本文链接：https://blog.csdn.net/zjhzjh893/article/details/82721646

版权

h5c3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        body {
            perspective: 1200px;
            background: gray;
        }

        ul{
            padding: 0;
            list-style: none;
            width: 200px;
            height: 200px;
            margin: 400px auto;
            position: relative;
            transition: all 20s;
            transform-style: preserve-3d;
            /* 在ul这里加上opacity会有bug */
            /* opacity: 0.9; */
        }

        ul:hover {
            transform: rotateY(2700deg) rotateX(2700deg);
        }

        li {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: .7;
        }

        li:nth-child(1) {

            transform-origin: right;
            left: -180px;
            background-color: #f00;
            transform: rotateY(90deg);
        }


        li:nth-child(2) {
            top: -180px;
            background-color: #0f0;

            transform-origin: bottom;
            transform: rotateX(-90deg);
        }

        li:nth-child(3) {
            right: -180px;
            background-color: #00f;
            transform-origin: left;
            transform: rotateY(-90deg);
        }

        li:nth-child(4){
            bottom: -180px;
            background-color: hotpink;
            transform-origin: top;
            transform: rotateX(90deg);
        }

        li:nth-child(5){
            background-color: purple;
            transform: translateZ(180px);
        }

        li:nth-child(6){

            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

页面布局：首先弄一个ul，放6个li标签，利用定位将他们放在合适的位置上。
利用transform-origin定轴的位置，然后用transform的rotate旋转至合适的位置，正面的使用平移transform的translateZ即可
最后给ul加上一个旋转看看立体效果，要注意给body加上视距以及在ul上开启3d效果

bug以及知识点：
知识点：

如果你做了一个立体，那么立体整体翻转的时候是没有3D效果的，因为浏览器默认没有开启3D效果，要开启3D
preserve-3d: 指定子元素定位在三维空间内

Bug：
1.我这个案例是想让每个面都透明的，那么我就想到加opacity属性来实现，本来想加在li标签上，结果发现错加在ul上了，然后就发现了个bug，只要在ul上加了opacity，我的3d布局就全没了，通过transform旋转的会没有高度或者宽度，有兴趣的朋友可以试着把上述代码注释一下看看效果。

Mrlonely思考笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D盒子效果以及遇到的bug

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫