Home > Article > Web Front-end > CSS to implement 3d translucent cube
This time I will bring you CSS to implement a 3D translucent cube. What are the precautions to implement a 3D translucent cube with CSS? The following is a practical case, let's take a look.
The rendering is as follows:
Sample code:
<html> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta charset="utf-8"/> <style type="text/css"> //css部分 html{ font-size:62.5%; } img{ width:300px; height:300px; } #stage{ //搭建一个舞台 margin-top:200px; margin-left:auto; margin-right:auto; width:300px; height:300px; perspective:1200px; font-size:5em; font-weight:bold; color:#cc00ff; } .cube{ //cube是正方体 position:relative; transform:rotateX(-45deg) rotateY(45deg); transform-style:preserve-3d; transition: all .6s; } .side{ color:blue; text-align:center; width:300px; height:300px; line-height:300px; position:absolute; background:#cc66ff; opacity:0.5; border:1px solid rgba(117,4,24,0.5); } //.front到.bottom是6个面分别进行旋转,构建出正方体的整形 .front{ transform:translateZ(150px); } .back{ transform:rotateY(180deg) translateZ(150px); } .left{ transform:rotateY(-90deg) translateZ(150px); } .right{ transform:rotateY(90deg) translateZ(150px); } .top{ transform:rotateX(90deg) translateZ(150px); } .bottom{ transform:rotatex(-90deg) translateZ(150px); } #stage:hover .cube{ //设置鼠标移上正方体时是否需要过渡效果以及过渡效果开始和结束的时间和速度 transform:rotateX(-45deg) rotateY(225deg); transition:transform .6s; } </style> </head> <body> <p id="stage"> <p class="cube"> <p class="side front"><img src="6.gif" alt="" /></p> <p class="side back"><img src="2.jpg" alt="" /></p> <p class="side left"><img src="3.jpg" alt="" /></p> <p class="side right"><img src="4.jpg" alt="" /></p> <p class="side top"><img src="5.jpg" alt="" /></p> <p class="side bottom"><img src="1.jpg" alt="" /></p> </p> </p> </body> </html>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
Advanced usage of background-attachment in css
CSS3 animation example to achieve click-to-enlarge
Bootstrap implementation price list
The above is the detailed content of CSS to implement 3d translucent cube. For more information, please follow other related articles on the PHP Chinese website!