<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>立方体</title> <style> .warp{ width:200px; height:200px; padding:200px; border:1px solid #000; perspective: 800px; } .box{ width:200px; height:200px; position: relative; transform-style: preserve-3d; transition: 1s all; transform: translateZ(-100px) rotateX(0); } .box div{ width:200px; height: 200px; position: absolute; font-size:100px; font-weight:bold; line-height:200px; text-align: center; color:#fff; } .box div:nth-of-type(1){ background-color:red;top:-200px;left:0; transform-origin: bottom; transform:translateZ(100px) rotateX(90deg); } .box div:nth-of-type(2){ background-color:blue;top:0;left:-200px; transform-origin: right; transform:translateZ(100px) rotateY(-90deg); } .box div:nth-of-type(3){ background-color:yellow;top:0;left:0; transform:translateZ(100px); } .box div:nth-of-type(4){ background-color:green;top:0;left:200px; transform-origin: left; transform:translateZ(100px) rotateY(90deg); } .box div:nth-of-type(5){ background-color:#000;top:200px;left:0; transform-origin: top; transform:translateZ(100px) rotateX(-90deg); } .box div:nth-of-type(6){ background-color:#f60;top:0;left:0; transform: translateZ(-100px) rotateX(180deg); } .warp:hover .box{ transform: translateZ(-100px) rotateX(180deg); } </style> </head> <body> <div class="warp"> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </body> </html>