In this mini tutorial I’ll show you a small example on how to create a 3D cube with pure css3 using -webkit-transform and -moz-transform, this tutorial works on mozilla firefox and google Chrome.
Code HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head
profile="http://gmpg.org/xfn/11">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS 3D Cube</title>
<link rel="stylesheet" type="text/css" href="css/experiment.css">
</head>
<body>
<div id="wrapper">
<div id="experiment">
<div class="cube" align="center">
<!-- Face 1 -->
<div class="bottomFace">
<div>
<h2 align="right">Face 1</h2>
</div>
</div>
<!-- End Face 1 -->
<!-- Face 2 -->
<div class="topFace">
<div>
<h2>Face 2</h2>
</div>
</div>
<!-- End Face 2 -->
<!-- Face 3 -->
<div class="leftFace">
<h2>Face 3</h2>
</div>
<!-- End Face 3 -->
<!-- Face 4 -->
<div class="rightFace">
<h2>Face 4</h2>
</div>
<!-- End Face 4 -->
</div>
</div>
</div>
</body>
</html>
Code CSS
body
{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
color:#333;
background:#392306;
}
.cube {
position: relative;
top: 200px;
}
.cube h2
{
text-shadow:1px 0 1px #020A0F;
color:#B59354;
}
.bottomFace2,
.bottomFace,
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 140px;
height: 140px;
background: url('../noise.jpg');
color:white;
}
.bottomFace2,
.bottomFace,
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.bottomFace
{
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 210deg);
background:url('../noise.jpg');
left:159px;
top:-91px
}
.leftFace {
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
background: url('../noise.jpg');
color:white;
}
.rightFace {
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
background: url('../noise.jpg');
left: 160px;
color:white;
opacity:0.5;
}
.topFace div {
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
background-color: #eee;
font-size: 10px;
}
.topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
top: -126px;
left: 80px;
}
.cube div.rightFace,
.cube div.leftFace {
overflow: hidden;
}
.cube div.topFace.video div {
background-color: #000;
color: #fff;
}