CSS3實現3D透明立體盒子
阿新 • • 發佈：2018-12-16
想要利用CSS3實現透明3D立體盒子
就要清楚立方體是由六個面組成，分上下左右和前後，考慮這些可以幫助我們更好的融入CSS3的程式碼
因此我設定了6個div，作為立方體的6個面
因為定位的原因，一開始所有的盒子都是面對著螢幕這面的，因此要賦予每個面不一樣的值，即不一樣的位置 它才能展現出來。
.trangel div:nth-of-type(1){ left: 0; top:-100px; background: -webkit-radial-gradient(rgba(20, 20, 20, 0.1), #000000); -webkit-transform-origin:bottom; /*設定旋轉元素的基點位置：從底部開始*/ -webkit-transform: rotateX(90deg); /*垂直旋轉90°*/ }
以上是對第一個盒子的樣式，先是向上移動-100px的距離，然後再垂直旋轉90°，
做好了一個面，其實其他的面就好理解了。
有程式碼註釋，快去自己實現一下效果吧!!!
接下來是全部的程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrap{ width: 100px; height: 100px; padding: 100px; border: 1px solid black; margin: 50px auto; position: relative; -webkit-perspective-origin:right top; /*可見面*/ -webkit-perspective:600px; /*可見立體長度*/ } .trangel{ width: 100px; height: 100px; position: relative; -webkit-transform-style: preserve-3d; /*編制3D舞臺效果*/ transition: 1s all; /*建立一秒的過渡屬性*/ } .trangel div{ position: absolute; width: 100px; height: 100px; color: #fff; line-height: 100px; text-align: center; } .trangel div:nth-of-type(1){ left: 0; top:-100px; background: -webkit-radial-gradient(rgba(20, 20, 20, 0.1), #000000); -webkit-transform-origin:bottom; /*設定旋轉元素的基點位置：從底部開始*/ -webkit-transform: rotateX(90deg); /*垂直旋轉90°*/ } .trangel div:nth-of-type(2){ left: -100px; top: 0; background: -webkit-radial-gradient( #000000, rgba(20, 20, 20, 0.1)); -webkit-transform-origin: right; -webkit-transform: rotateY(-90deg); } .trangel div:nth-of-type(3){ background: -webkit-radial-gradient( #000000, rgba(20, 20, 20, 0.1)); left: 0px; top: 0; } .trangel div:nth-of-type(4){ left: 0px; top: 100px; background: -webkit-radial-gradient(rgba(0, 0, 0, 0), #000000); -webkit-transform-origin: top; -webkit-transform: rotateX(-90deg); } .trangel div:nth-of-type(5){ left: 100px; top: 0px; background: -webkit-radial-gradient(#000000, rgba(20, 20, 20, 0.1)); -webkit-transform-origin:left; -webkit-transform: rotateY(90deg); } .trangel div:nth-of-type(6){ left: 0px; top: 0px; background: -webkit-radial-gradient(#000000, rgba(20, 20, 20, 0.1)); -webkit-transform:translateZ(-100px) rotateX(180deg); } .wrap:hover .trangel{ -webkit-transform: rotateX(180deg) rotateY(360deg) rotateZ(20deg); } </style> </head> <body> <div class="wrap"> <div class="trangel"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </body> </html>