老师 请问我这样写可以吗

来源:2-12 空间移动

慕仙0240544

2022-07-02 20:42:35

<!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;

        }

        .box1 {

            width: 200px;

            height: 200px;

            margin: 200px auto;

            position: relative;

            perspective: 300px;

        }

        p {

            position: absolute;

            left: 0;

            top: 0;

            height: 200px;

            width: 200px;

            background-color: blueviolet;

        }

        .one {

            transform: translateZ(-100px);

        }

        .two {

            transform: translateZ(100px);

        }

        .three {

            transform: translate(0,-100px) rotateX(90deg) ;

            /* transform: rotateX(90deg) translateZ(100px) */

        }

        .four {

            transform: translate(0,100px) rotateX(90deg) ;

        }

        .five {

            transform: translate(-100px) rotateY(90deg);

        }

        .six {

            transform: translate(100px) rotateY(90deg);

        }

    </style>

</head>

<body>

    <div class="box1">

        <p class="one"></p>

        <p class="two"></p>

        <p class="three"></p>

        <p class="four"></p>

        <p class="five"></p>

        <p class="six"></p>

    </div>

</body>

</html>


写回答

1回答

好帮手慕星星

2022-07-02

同学你好,是可以的,效果没问题。祝学习愉快~

0

0 学习 · 17877 问题

查看课程