<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { perspective: 400px; } .box { position: relative; height: 200px; width: 200px; margin: 100px auto; transform-style: preserve-3d; transition: all 3s; } .box:hover { transform: rotateX(360deg); } .q, .w, .e,.r,.d,.f { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: pink; } /*前面*/ .q { transform: translateZ(100px); } /*下面*/ .w { transform:translateY(100px) rotateX(90deg); } /*左面*/ .e { transform: translateX(-100px) rotateY(90deg); } /*右面*/ .r { transform: translateX(100px) rotateY(90deg); } /*上面*/ .d { transform: translateY(-100px) rotateX(90deg); } /*后面*/ .f { transform: translateZ(-100px); } </style> </head> <body> <div class="box"> <div class="q"></div> <div class="w"></div> <div class="e"></div> <div class="r"></div> <div class="d"></div> <div class="f"></div> </div> </body> </html>
旋转立方体
最新推荐文章于 2024-10-04 00:46:18 发布