<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#box {
width:300px;
height:300px;
List-style:none;
position:relative;
margin:100px Auto;
-webkit-transform-style:preserve-3d;
perspective:800px;
Perspective-origin:center Center;
Transform:rotatex ( -20deg) Rotatey (20deg) Rotatez (0deg);
}
#box li{
Position:absolute;
width:300px;
height:300px;
Text-align:center;
line-height:300px;
}
#box Li:nth-child (1) {
background: #D390C4;
opacity:0.5;
-webkit-transform:translatez (150px);
-ms-transform:translatez (150px);
-moz-transform:translatez (150px);
-o-transform:translatez (150px);
Transform:translatez (150px);
}
#box Li:nth-child (2) {
background: #358D36;
opacity:0.5;
Transform:translatez ( -150px);
}
#box Li:nth-child (3) {
background: #C9CA3C;
opacity:0.5;
Transform:translatey ( -150px) Rotatex ( -90deg);
}
#box Li:nth-child (4) {
background: #741961;
opacity:0.5;
Transform:translatey (150px) Rotatex ( -90deg);
}
#box Li:nth-child (5) {
background: #3CB1BF;
opacity:0.5;
Transform:translatex ( -150px) Rotatey ( -90deg);
}
#box Li:nth-child (6) {
Background: #D75A3F;
opacity:0.5;
Transform:translatex (150px) Rotatey ( -90deg);
}
</style>
<body>
<ul id= "box" >
<li> First Side </li>
<li> Second Side </li>
<li> Third Side </li>
<li> Fourth Side </li>
<li> Fifth Side </li>
<li> Sixth side </li>
</ul>
</body>
Css3-3d Cube Effect