3D模块转换——正方体构造

最新推荐文章于 2023-01-01 20:23:18 发布

jwz934738949

最新推荐文章于 2023-01-01 20:23:18 发布

阅读量378

点赞数

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/90716910

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

与2D模块转换相对应，CSS3中也有3D模块转换。

格式：transform-style:preserve-3d;

需要注意的是，3D模块转换只有放在父元素中才会起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
            position: relative;
            transform: rotateX(-20deg) rotateY(45deg);
        }
        ul li{
            height: 200px;
            width: 200px;
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
        }
        ul li:nth-child(1){
            background-color: red;
            transform: translate(-100px) rotateY(90deg);
        }
        ul li:nth-child(2){
            background-color: blue;
            transform: translate(100px) rotateY(90deg);
        }
        ul li:nth-child(3){
            background-color: aqua;
            /*与旋转相对应，平移也有方向。translateX代表在x轴方向平移；translateY代表在y轴方向平移；
            translateZ代表在z轴方向平移*/
            transform: translateY(-100px) rotateX(90deg);
        }
        ul li:nth-child(4){
            background-color: orange;
            transform: translateY(100px) rotateX(90deg);
        }
        ul li:nth-child(5){
            background-color: yellow;
            transform: translateZ(-100px);
        }
        ul li:nth-child(6){
            background-color: green;
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>