Skip to content

Instantly share code, notes, and snippets.

@katsumitakano

katsumitakano/index.html

Created March 17, 2014 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save katsumitakano/9600865 to your computer and use it in GitHub Desktop.
Save katsumitakano/9600865 to your computer and use it in GitHub Desktop.
Download ZIP
[CSS] 3D Cube
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Cube</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cube-container">
<div class="cube">
<div class="front">1</div>
<div class="right">2</div>
<div class="top">3</div>
<div class="bottom">4</div>
<div class="left">5</div>
<div class="back">6</div>
</div>
</div>
</body>
</html>
Raw
style.css
/* Cube */
/*************************************************/
.cube-container {
margin: 100px 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cube {
position: relative;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-30deg) rotateX(-30deg);
-moz-transform: rotateY(-30deg) rotateX(-30deg);
-ms-transform: rotateY(-30deg) rotateX(-30deg);
-o-transform: rotateY(-30deg) rotateX(-30deg);
transform: rotateY(-30deg) rotateX(-30deg);
}
.cube div {
position: absolute;
width: 194px;
height: 194px;
border: 3px solid #000000;
background: rgba(65, 195, 157, 0.6);
text-align: center;
font-size: 130px;
}
.front {
-webkit-transform: rotateY(0deg) translateZ(100px);
-moz-transform: rotateY(0deg) translateZ(100px);
-ms-transform: rotateY(0deg) translateZ(100px);
-o-transform: rotateY(0deg) translateZ(100px);
transform: rotateY(0deg) translateZ(100px);
}
.back {
-webkit-transform: rotateX(180deg) translateZ(100px);
-moz-transform: rotateX(180deg) translateZ(100px);
-ms-transform: rotateX(180deg) translateZ(100px);
-o-transform: rotateX(180deg) translateZ(100px);
transform: rotateX(180deg) translateZ(100px);
}
.right {
-webkit-transform: rotateY(90deg) translateZ(100px);
-moz-transform: rotateY(90deg) translateZ(100px);
-ms-transform: rotateY(90deg) translateZ(100px);
-o-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
.left {
-webkit-transform: rotateY(-90deg) translateZ(100px);
-moz-transform: rotateY(-90deg) translateZ(100px);
-ms-transform: rotateY(-90deg) translateZ(100px);
-o-transform: rotateY(-90deg) translateZ(100px);
transform: rotateY(-90deg) translateZ(100px);
}
.top {
-webkit-transform: rotateX(90deg) translateZ(100px);
-moz-transform: rotateX(90deg) translateZ(100px);
-ms-transform: rotateX(90deg) translateZ(100px);
-o-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
-webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
-ms-transform: rotateX(-90deg) translateZ(100px);
-o-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment