正方体一(3D转化模型)

正方体一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正方体</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*六个面叠加起来,子绝父相*/
        ul {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin: 100px auto;
            position: relative;
            transform: rotateX(0deg ) rotateY(0deg);
            transform-style: preserve-3d;
        }

        ul li {
            list-style: none;
            width: 200px;
            height: 200px;
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }

        ul li:nth-child(1) {
            background-color: red;
            transform: translateX(-100px) rotateY(-90deg);

        }

        ul li:nth-child(2) {
            background-color: green;
            transform: translateX(100px) rotateY(90deg);
        }

        ul li:nth-child(3) {
            background-color: blue;
            transform: translateY(100px) rotateX(-90deg);

        }

        ul li:nth-child(4) {
            background-color: yellow;
            transform: translateY(-100px) rotateX(90deg);
        }

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

        }

        ul li:nth-child(6) {
            background-color: pink;
            transform-origin: 100px 100px;
            transform:  translateZ(-100px) rotateY(180deg);
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>
注意点:

1.此方法思路是,将左右两个面分别沿着x轴平移100px和-100px然后将其过中心绕y轴旋转90°和-90°。上下两个面就沿着y轴平移100px和-100px,然后过其中心绕x轴旋转90°和-90°。然后将前后两个面分别沿z轴平移100px和-100px.

2.有一个缺陷,6那个面数字不能正确显示。

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页