老师你看这样写可以吗?

来源:2-14 编程练习

贪财好色de男青年

2020-12-04 19:50:40

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        div{

            width200px;

            height200px;

            border1px solid ;

            margin:0 auto;

            /* background-color:tomato; */

            perspective:300px;

            positionrelative;

        }

        p{

            position:absolute;

            top:0;

            left:0;

            width200px;

            height200px;

            /* background-color:yellow; */

        }

        .a{

            background-color:red;

            transformrotateX(70degtranslatez(70px);


        }

        .b{

            background-color:green;

            transformrotateX(70degtranslatez(23px);


        }

        .c{

            background-color:blue;

            transformrotateX(79degtranslatez(-53px);


        }

    </style>

</head>

<body>

    <div>

        <p class="a"></p>

        <p class="b"></p>

        <p class="c"></p>

    </div>

</body>

</html>


写回答

1回答

好帮手慕张

2020-12-05

同学你好,代码没有问题,但是可以稍微调整下角度使代码效果层叠感更强,同学可以打开控制台调整好之后再进行修改代码,参考下图为老师调整后的效果:

http://img1.sycdn.imooc.com/climg/5fcafc95093a4e4918130301.jpg

http://img1.sycdn.imooc.com/climg/5fcafca80991e24d06250639.jpg

祝学习愉快!


1

0 学习 · 15276 问题

查看课程