CSS3 Isometric Cube | 3D Isometric Design Html & CSS

SOURCE CODE

<!DOCTYPE html>
<html>
<head>
	<title>Isometric Cube</title>
	<style>
body {
	margin: 0;
	padding: 0;
}
.cube {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 300px;
	overflow: hidden;
}
.face {
	position: absolute;
	width: 100px;
	height: 100px;
	transform-origin: 0 0;
	
}
.front {
	background: #e85fa2;
	transform: rotate(-30deg) skewX(-30deg) translate(130px, 172px) scaleY(0.864);
}
.side {
	background: #db357d;
	transform: rotate(90deg) skewX(-30deg) scaleY(0.864) translate(68px, -131px);
}
.top {
	background: #e34d99;
	transform: rotate(210deg) skew(-30deg) translate(-200px, -60px) scaleY(0.864);
}
	</style>
</head>
<body>
	<div class='cube'>
  		<div class='face front'></div>
  		<div class='face side'></div>
  		<div class='face top'></div>
	</div>
</body>
</html>

CSS3 Isometric Cube | 3D Isometric Design Html & CSS

Contact Form