首页 > 代码库 > 三维立体
三维立体
点一下,让它动起来。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;list-style: none;} #box{ width: 200px; height: 200px; margin: 100px auto; transform-style: preserve-3d; /*transform: perspective(800px) rotateY(-60deg) translateX(30px);*/ transform: perspective(800px) rotateY(-60deg) rotateX(30deg); transition: all 5s ease; } #box div{ width: 100%; height: 100%; position: absolute; line-height: 200px; text-align: center; color: #fff; font-size: 40px; opacity: 0.7; } #box .box1{ background: red; transform: translateZ(100px); } #box .box2{ background: green; transform: translateZ(-100px); } #box .box3{ background: blue; transform: translateX(-100px) rotateY(90deg); } #box .box4{ background: yellow; transform: translateY(-100px) rotateX(90deg); } #box .box5{ background: pink; transform: translateY(100px) rotateX(90deg); } #box .box6{ background: deepskyblue; transform: translateX(100px) rotateY(90deg); } #box:active{ /*transform: perspective(800px) rotateY(-360deg) translateX(360px) ;*/ transform: perspective(400px) rotateY(-3600deg) rotateX(3600deg) ; } </style> </head> <body> <div id="box"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> <div class="box6">6</div> </div> </body> </html>
三维立体
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。