老师 请问我这样写可以吗 谢谢

来源:2-14 编程练习

慕仙0240544

2022-07-03 09:21:25

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

         * {

        margin: 0;

        padding: 0;

    }


    .box {

        width: 200px;

        height: 200px;

        margin: 200px auto;

        perspective: 300px;

        position: relative;

    }


    .box p {

        position: absolute;

        left: 0;

        top: 0;

        width: 200px;

        height: 200px;

    }

    .box p:nth-child(1) {

        background-color: red;

        transform: rotateX(90deg) translateZ(100px);

    }

    .box p:nth-child(2) {

        background-color: greenyellow;

        transform: rotateX(90deg);

    }

    .box p:nth-child(3) {

        background-color: blue;

        transform: rotateX(-90deg) translateZ(100px);

    }


    </style>

</head>

<body>

    <div class="box">

        <p></p>

        <p></p>

        <p></p>

</body>

</html>


写回答

1回答

imooc_慕慕

2022-07-03

同学你好,思路是可以的,角度有些偏差;修改参考如下:

https://img.mukewang.com/climg/62c0fe2e09f7a9fb05700626.jpg

自己可以在控制台,调节试试看;

祝学习愉快~

0

0 学习 · 17877 问题

查看课程