Agony_查看:0 回复:0 评论:0 创建时间:2020-07-07T15:46:19用户:Agony_查看:0 回复:0 评论:0 创建时间:2020-07-07T15:46:19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ margin:100px auto; height:500px; width:500px; border:1px solid #000; /* 配置3d环境*/ transform-style:preserve-3d; transform: rotateX(40deg) rotateY(-40deg); } .box div{ height:400px; width:400px; position:absolute; left:0; top:0; /*opacity:.9;*/ } .box .top{ background-color:#ff9c23; transform:rotateX(90deg) translateZ(-200px); } .box .bottom{ background-color:green; transform:rotateX(90deg) translateZ(200px); } .box .left{ background-color:#5cadff; transform:rotateY(90deg) translateZ(200px); } .box .right{ background-color:red; transform:rotateY(90deg) translateZ(-200px); } .box .before{ background-color:pink; transform:translateZ(200px); } .box .after{ background-color:yellow; transform:translateZ(-200px); } </style> </head> <body> <div class="box"> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> <div class="before"></div> <div class="after"></div> </div> </body> </html>