css3製作3D立體模型
阿新 • • 發佈：2018-11-07
程式碼跟註釋都在裡面了！想知道是什麼效果不妨自己試試！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> @-webkit-keyframes domove{ 0%{ -webkit-transform: rotate(0deg) translate(0px); } 25%{ -webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(50px) translateY(-50px); } 50%{ -webkit-transform: rotateX(-180deg) rotateY(180deg) translateX(0px) translateY(0px); } 75%{ -webkit-transform: rotateX(-270deg) rotateY(-270deg) translateX(-50px) translateY(50px); } 100%{ -webkit-transform: rotate(-360deg) translate(0px); } } .warp{ width: 800px; height: 500px; border: 1px solid #000000; margin: 200px auto; -webkit-perspective-origin: top right;/*景深基點,右上視角*/ -webkit-perspective: 600px;/*景深600px*/ } .warp .box{ width: 100px; line-height: 100px; margin: 200px auto; position: relative; -webkit-transform-style:preserve-3d ;/* 搭建一個3D效果的環境*/ -webkit-animation: 3s domove infinite linear;/*無限迴圈且速度勻速*/ } .warp .box div{ width: 100px; height: 100px; position: absolute; background: blue; text-align: center; } /*用絕對定位為每個盒子定位一個正六邊體的平面圖*/ /*然後根據需求來將他們摺疊成正方體*/ .warp .box div:nth-child(1){ top: -100px; left: 0px; background: red; -webkit-transform-origin: bottom;/*沿這個盒子的底邊旋轉，以下面同理*/ -webkit-transform: rotateX(-90deg);/*X軸旋轉-90度，以下面同理*/ } .warp .box div:nth-child(2){ top: 100px; left: 0px; background: green; -webkit-transform-origin: top; -webkit-transform: rotateX(90deg); } .warp .box div:nth-child(3){ top: 0px; left: 0px; background: yellow; -webkit-transform: translateZ(100px) rotateZ(-180deg);/*Z軸平移了100px,沿Z軸旋轉了-180度*/ } .warp .box div:nth-child(4){ top: -0px; left: -100px; background: orange; -webkit-transform-origin: right; -webkit-transform: rotateY(90deg); } .warp .box div:nth-child(5){ top: 0px; right: -100px; background: darkkhaki; -webkit-transform-origin: left; -webkit-transform: rotateY(-90deg); } .warp .box div:nth-child(6){ top: 0px; left: 0px; background: rgba(255,255,090,0.5); } </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>