<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } section{ width:300px; height:300px; position:fixed; left:0;right:0; top:0;bottom:0; margin:auto; transform-style:preserve-3d; transform:rotateX(20deg) rotateY(30deg); } div{ width:300px; height:300px; text-align:center; line-height:300px; font-weight:900; font-size:50px; color:#fff; position:absolute; transition:1s; } section:hover div:nth-child(1){ transform-origin:left center; background:red; transform:rotateY(-90deg); } section:hover div:nth-child(2){ transform-origin:right center; background:yellow; transform:rotateY(90deg); } section:hover div:nth-child(3){ transform-origin:center top; background:purple; transform:rotateX(90deg) rotateY(180deg); } section:hover div:nth-child(4){ transform-origin:center bottom; background:green; transform:rotateX(-90deg); } section:hover div:nth-child(5){ transform:translateZ(300px); background:blue; } section:hover div:nth-child(6){ background:pink; transform:rotateY(180deg); } </style> </head> <body> <section> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </section> </body> </html>
滑动生成立方体！