how to create 3d cube using css3
June - 17 - 2010 by
Arbaoui Mehdi
Hi, I'm Arbaoui Mehdi. I'm the editor of Depotwebdesigner and Codamaniacs,the Site Manager of both Tutoslinux, and Rabbitemplate. I spend too much time in front of the computer.
Contact Author : support@depotwebdesigner.com
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;
}
Related posts:
- How to create a jQuery Vertical Scroll
- how to create tabs with css without javascript
- How to create a CSS3 Menu using -moz-border-radius
- How to Create a Simple single level menu using CSS
- How to create a menu in pure CSS? And why?
My cousin recommended this blog and she was totally right keep up the fantastic work!
Reply
this post is very usefull thx!
Reply
This was a great help.
Can you please tell me how to rotate the cube in 3D with the use of up,down,right and left button of keyboard.
Reply