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

最新推荐文章于 2023-03-19 11:50:15 发布

407指导员

最新推荐文章于 2023-03-19 11:50:15 发布

阅读量695

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110460184

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

正方体一

<!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那个面数字不能正确显示。

在这里插入图片描述

407指导员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正方体一(3D转化模型)

正方体一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正方体</title> <style> * { margin: 0; padding: 0; } /*六个面叠加起来，子绝父相*/ ul {
复制链接

扫一扫

专栏目录