<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Rubik's Cube </title>
<style type= "Text/css" >
section{width:100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspective:800px;}
. box {width:100px;height:100px;position:relative;
transform-style:preserve-3d;
transition:4s;
Transform-origin:center center-50px;
}
. Box Div{width:100px;height:100px;position:absolute;color:white;font-size:50px;text-align:center;line-height : 100px;}
. Box Div:nth-of-type (1) {
Background: #FF6600;;
Transform:translatex ( -100px) Rotatey ( -90deg);
Transform-origin:right;
}
. Box Div:nth-of-type (2) {
background:red;
Transform:translatey ( -100px) Rotatex (90deg);
Transform-origin:bottom;
}
. Box Div:nth-of-type (3) {
Background:darkviolet;
Transform:translatex (100px) Rotatey (90deg);
Transform-origin:left;
}
. Box Div:nth-of-type (4) {
Background:yellow;
Transform:translatey (100px) Rotatex ( -90deg);
Transform-origin:top;
}
. Box Div:nth-of-type (5) {
Background:green;
Transform:translatez ( -100px) Rotatey (180deg);
}
. Box Div:nth-of-type (6) {
Background:blue;
}
Section:hover. box{
Transform:rotatex (270deg) Rotatey ( -270deg) Rotatex ( -270deg) Rotatey (270deg);
}
</style>
<body>
<section>
<div class= "box" >
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</section>
</body>
CSS3 3d environment to achieve cube effect code