2-14 作业，请老师帮忙检查一下

首页课程实战体系课手记专栏慕课教程

2-14 作业，请老师帮忙检查一下

来源：2-14 编程练习

呜蜩的呀

2022-07-29 20:08:50

问题描述：

效果实现了，但是看起来好像有点违和，是不应该在设置相对定位的吗？因为translate属性在一定程度上和这个功能重合了，但是不设置的话，这三个好像会重叠在一起？

相关代码：

<!Doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>空间移动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            /* 注意3D旋转时，对演员添加rotateX或者rotateY属性时，要记得对其父元素"舞台"添加perspective属性，对舞台添加可视度，这样子设置的3D旋转属性才能生效 */
            perspective: 300px;
            position: relative;
        }

        .box p {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        /* 补充代码 */
        /* 给p标签添加旋转，让其绕x轴旋转到合适的位置
                2D旋转的情况下，默认是绕Z轴旋转，但是此时要求绕X轴旋转，所以应该用3D旋转rotatX
                
                这个属性的单位是deg
                
                给p标签添加移动，让其绕z轴移动到合适的位置
                移动应该是空间移动，使用transform：translateZ属性
                
                这个属性的单位是px

        */

        /* 要给设置相对定位固定它们的位置 */
        .box p:nth-child(1) {
            background-color: #ff7f7f;
            transform: rotateX(75deg) translateZ(15px);
            top: -20px;
            left: 0;
        }
       
        .box p:nth-child(2) {
            /* display: none; */
            background-color: #7fff7f;
            transform: rotateX(90deg) translateZ(15px);
            top: 60px;
            left: 0;
        }
       
        .box p:nth-child(3) {
            /* display: none; */
            background-color: #7f7fff;
            transform: rotateX(105deg) translateZ(30px);
            top: 145px;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

</html>

写回答

1回答