接着上一篇博客的内容顺藤摸瓜往下想，既然stage有景深这个概念，可以表达3D场景，那么这个stage就可以呈现立体几何咯，于是自己写了个Cubic Demo
一个正方体有6个面，我们把一个正方体平铺开来就是一个十字的形状，然后变换每一面的角度把正方体“折叠”起来！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>Cube</title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } .wrapper{ width:200px; height: 200px; border: 1px solid #f60; margin: 0 auto; padding: 100px; margin-top: 100px; -webkit-perspective:800px; } .cube{ width: 200px; height: 200px; position: relative; -webkit-transform-style:preserve-3d; transition:1s all; } .cube li{ width: 200px; height: 200px; position: absolute; text-align: center; line-height: 200px; color: #fff; font-size: 30px; } .cube li:nth-of-type(1){ background: red; top: -200px; left: 0; -webkit-transform-origin: bottom; -webkit-transform: translateZ(100px) rotateX(90deg); } .cube li:nth-of-type(2){ background: green; top: 0; left: -200px; -webkit-transform-origin: right; -webkit-transform: translateZ(100px) rotateY(-90deg); } .cube li:nth-of-type(3){ background: blue; top: 0; left: 0; -webkit-transform: translateZ(100px); } .cube li:nth-of-type(4){ background: yellow; top: 0; left: 200px; -webkit-transform-origin: left; -webkit-transform: translateZ(100px) rotateY(90deg); } .cube li:nth-of-type(5){ background: purple; top: 200px; left: 0; -webkit-transform-origin: top; -webkit-transform: translateZ(100px) rotateX(-90deg); } .cube li:nth-of-type(6){ background: orange; top: 0; left: 0; -webkit-transform: translateZ(-100px) rotateX(180deg); } .wrapper:hover .cube{ -webkit-transform:rotateX(180deg); } </style> </head> <body> <div class="wrapper"> <ul class="cube"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body> </html>
也可以把另外两个侧面去掉，只留4个面。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>Cube2</title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } .wrapper{ width:200px; height: 200px; border: 1px solid #f60; margin: 0 auto; padding: 100px; margin-top: 100px; -webkit-perspective:800px; } .cube{ width: 200px; height: 200px; position: relative; -webkit-transform-style:preserve-3d; transition:1s all; -webkit-transform:translateZ(-100px) rotate(0deg); } .cube li{ width: 200px; height: 200px; position: absolute; text-align: center; line-height: 200px; color: #fff; font-size: 30px; } .cube li:nth-of-type(1){ background: red; -webkit-transform:translateZ(100px); } .cube li:nth-of-type(2){ background: green; -webkit-transform-origin:top; -webkit-transform:translateZ(-100px) rotateX(90deg); } .cube li:nth-of-type(3){ background: blue; -webkit-transform:translateZ(-100px) rotateX(180deg); } .cube li:nth-of-type(4){ background: yellow; -webkit-transform-origin:bottom; -webkit-transform:translateZ(-100px) rotateX(-90deg); } .wrapper:hover .cube{ -webkit-transform: translateZ(-100px) rotateX(270deg); } </style> </head> <body> <div class="wrapper"> <ul class="cube"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>