老师好,请检查2-14练习代码
来源:2-14 编程练习
慕桂英1122475
2023-03-05 21:03:28
相关代码:
<!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(75deg) translateZ(50px);} .box p:nth-child(2){ background-color: greenyellow; transform: rotateX(83deg) ; } .box p:nth-child(3){ background-color:blue; transform: rotateX(90deg)translateZ(-50px); } /* 补充代码 */ </style> </head> <body> <div class="box"> <p></p> <p></p> <p></p> </div> </head> <body> </body> </html>
1回答
好帮手慕久久
2023-03-06
同学你好,效果是对的,注意html结构要正确:
祝学习愉快!
相似问题