Hello! We went to war against class members to share a time period of the knowledge learned a week, this week I bring you is to make a simple cube, here I would like to explain.
1: We first give a parent element, I would like to do this cube with a list, so my parent element is ul, ul to set about the initial width and height and style, and we need a global style:
<style type="text/css">
*{margin:0;padding:0;}
li{list-style:none;}
body,html{height:100%;}
.box{
width:200px;
height:200px;
background:#00FFFF;
margin:250px auto;
}Figure:
2, then a cube is composed of six faces, each face shape and size are the same, which we need to write down the same six elements, here I use the wording of the list, which uses six representatives of six faces of the cube li, li is then provided to each of the width and height 200px:
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>.box li{
width:200px;
height:200px;
background:#f00;
font-size:50px;
}Figure:
3, we need to let this initial six li displayed in one place, so we need to add them to locate, namely:
.box{
width:200px;
height:200px;
background:#00FFFF;
margin:250px auto;
position:relative;
.box li{
width:200px;
height:200px;
background:#f00;
font-size:50px;
position:absolute;
left:0px;top:0px;
}Figure:
4: Then we need to let each li it needs to shift in position, because here are five li need to shift, so we use the nth-child selector ways to make it easier to see, I give they put on a different background color, and because it is a cube, so they are certainly in 3d space, we also need to add the parent element, ie ul 3D properties:
.box li:nth-child(2){
transform:translateZ(-200px);
background:#0f0;
}
.box li:nth-child(3){
transform:translateX(-200px);
background:#00f;
}
.box li:nth-child(4){
transform:translateX(200px);
background:#ff0;
}
.box li:nth-child(5){
transform:translateY(-200px);
background:#0ff;
}
.box li:nth-child(6){
transform:translateY(200px);
background:#f0f;
}FIG:
5, then we need to add attributes to the rotating and changing the origin of these li manner, allowed to become a cube:
.box li:nth-child(2){
transform:translateZ(-200px) rotateY(180deg);
background:#0f0;
}
.box li:nth-child(3){
transform:translateX(-200px) rotateY(-90deg);
transform-origin:right center;
background:#00f;
}
.box li:nth-child(4){
transform:translateX(200px) rotateY(90deg);
transform-origin:left center;
background:#ff0;
}
.box li:nth-child(5){
transform:translateY(-200px) rotateX(90deg);
transform-origin:center bottom;
background:#0ff;
}
.box li:nth-child(6){
transform:translateY(200px) rotateX(-90deg);
transform-origin:center top;
background:#f0f;
}FIG:
6: We look for us in the cube of a slip rotation ul adding attribute and transition time:
.box{
width:200px;
height:200px;
background:#00FFFF;
margin:250px auto;
position:relative;
transform-style:preserve-3d;
transition:6s;
}.box:hover{
transform:rotateX(-360deg) rotateY(-360deg);
}
Look! On a cube made out.
Appendix: The complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
li{list-style:none;}
body,html{height:100%;}
.box{
width:200px;
height:200px;
margin:250px auto;
position:relative;
transform-style:preserve-3d;
transition:6s;
}
.box li{
width:200px;
height:200px;
background:#f00;
font-size:50px;
position:absolute;
left:0px;top:0px;
}
.box li:nth-child(2){
transform:translateZ(-200px) rotateY(180deg);
background:#0f0;
}
.box li:nth-child(3){
transform:translateX(-200px) rotateY(-90deg);
transform-origin:right center;
background:#00f;
}
.box li:nth-child(4){
transform:translateX(200px) rotateY(90deg);
transform-origin:left center;
background:#ff0;
}
.box li:nth-child(5){
transform:translateY(-200px) rotateX(90deg);
transform-origin:center bottom;
background:#0ff;
}
.box li:nth-child(6){
transform:translateY(200px) rotateX(-90deg);
transform-origin:center top;
background:#f0f;
}
.box:hover{
transform:rotateX(-360deg) rotateY(-360deg);
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
