CSS3實現3d、過渡、變化案例
阿新 • • 發佈：2018-12-13
一開始盒子狀態：
過渡過程：
最終形式： 大盒子旋轉180deg，小盒子跟著大盒子旋轉然後展開。
程式碼實現
body模組：
<body> <div class="stage"> <div class="face1 face">前</div> <div class="face2 face">後</div> <div class="face3 face">左</div> <div class="face4 face">右</div> <div class="face5 face">上</div> <div class="face6 face">下</div> <div class="small1 small">前</div> <div class="small2 small">後</div> <div class="small3 small">左</div> <div class="small4 small">右</div> <div class="small5 small">上</div> <div class="small6 small">下</div> </div> </body>
CSS：
body{ perspective:800px; } .stage{ position:relative; width:200px; height:200px; margin:400px auto; box-shadow:0 0 15px #000 inset; transform-style:preserve-3d; transition:2s; } /*注意：因為position，所有的transform都是相對於父級元素來變化，因此把父級元素設定為舞臺。*/ .stage:hover{ transform:rotateY(180deg); } .stage:hover .face5{ transform:translateZ(100px) translateY(-200px); } .stage:hover .small1{ transform:translateZ(100px) translateY(-300px); } .stage:hover .small2{ transform:rotateY(180deg) translateZ(100px) translateY(-300px); } .stage:hover .small3{ transform:rotateY(-90deg) translateZ(100px) translateY(-300px); } .stage:hover .small4{ transform:rotateY(90deg) translateZ(100px) translateY(-300px); } .stage:hover .small5{ transform:rotateX(90deg) translateZ(400px); } .stage:hover .small6{ transform:rotatex(-90deg) translateZ(-200px); } .face{ position:absolute; width:200px; height:200px; box-shadow:0 0 20px #554ee9 inset; transition:2s; } .small{ position:absolute; right:50px; bottom:0px; width:100px; height:100px; box-shadow:0 0 5px #000 inset; transition:2s; } .face1{ transform:translateZ(100px); } .face2{ transform:rotateY(180deg) translateZ(100px); } .face3{ transform:rotateY(-90deg) translateZ(100px); } .face4{ transform:rotateY(90deg) translateZ(100px); } .face5{ transform:rotateX(90deg) translateZ(100px); } .face6{ transform:rotatex(-90deg) translateZ(100px); } .small1{ transform:translateZ(50px); } .small2{ transform:rotateY(180deg) translateZ(50px); } .small3{ transform:rotateY(-90deg) translateZ(50px); } .small4{ transform:rotateY(90deg) translateZ(50px); } .small5{ transform:rotateX(90deg) translateZ(50px); } .small6{ transform:rotatex(-90deg) translateZ(50px); }