Use Div+css to make a cube

    <style>. Cube{width:200px;Height:200px;margin:100px Auto;position:relative;            /*perspective:1000px;*/Transform:Rotatex (30deg) Rotatey (30deg);Transform-style:preserve-3d;        }. Front,. Back,. Top,. Bottom,.{width:200px;Height:200px;font-family:"Microsoft Yahei";Line-height:200px;text-align:Center;position:Absolute;Top:0; Left:0;Opacity:0.5;        }. Front{Background-color:#008000;Transform:Translatez (100px);        }. Back{Background-color:#ffff00;Transform:Translatez ( -100px);        }. Top{Background-color:#ff0000;Transform:Rotatex (90deg) Translatez (100px);        }. Bottom{Background-color:#ffa500;Transform:Rotatex (90deg) Translatez ( -100px);        }. Left{Background-color:#0000ff;Transform:Rotatey (90deg) Translatez ( -100px);        }. Right{Background-color:#ffc0cb;Transform:Rotatey (90deg) Translatez (100px);        }    </style>    <Divclass= "Cube">        <Divclass= "Front">Front</Div>        <Divclass= "Back">Back</Div>        <Divclass= "Top">Top</Div>        <Divclass= "Bottom">Bottom</Div>        <Divclass= "Left">Left</Div>        <Divclass= "Right">Right</Div>    </Div>

Thought: Mr. 6 Square, then the 6 squares in accordance with the order of the left and right to deflect half of their length, and then the CSS code to the 6 squares set a whole, namely the cube. Then rotate the cube to a certain angle, then set the transparency (which can be seen from the front) and visually look more realistic.

Frontbacktopbottomleftright

Use Div+css to make a cube