效果
代码解析
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>立方体</title>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
</head>
<body>
<div id="box">
<div id="box1">
<div id="front">前</div>
<div id="back">后</div>
<div id="top">上</div>
<div id="bottom">下</div>
<div id="left">左</div>
<div id="right">右</div>
<i id="i-front"></i>
<i id="i-back"></i>
<i id="i-top"></i>
<i id="i-bottom"></i>
<i id="i-left"></i>
<i id="i-right"></i>
</div>
</div>
</body>
</html>
- demo.css
body{
background-color: #cb99c5;
}
#box{
/* 实现垂直水平居中 start */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* 实现垂直水平居中 end */
perspective: 1000px;/*设置距离为1000来看立方体*/
}
#box1{
width: 200px;
height: 200px;
transform-style: preserve-3d;/* 3D转换 */
animation: dh 10s linear infinite;/* css3动画 */
/* transform: rotateX(-20deg) rotateY(-40deg); */
}
#box #box1 div{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
color: white;
font-size: 18px;
transition: 0.6S;/* 过渡效果 */
}
#box #box1 i{
position: absolute;
top: 50%;
left: 50%;
margin-top:-50px;
margin-left:-50px;
width: 100px;
height: 100px;
}
#box #box1 #front{
background-color: #84fab080;
transform: translateZ(100px);
}
#box #box1 #back{
background-color: #fa5a5a90;
transform: translateZ(-100px) rotateY(-180deg) ;
}
#box #box1 #top{
background-color: #f0d26490;
transform: rotateX(90deg) translateZ(100px);
}
#box #box1 #bottom{
background-color: #82c8a090;
transform: rotateX(-90deg) translateZ(100px);
}
#box #box1 #left{
background-color: #7fccde90;
transform: rotateY(-90deg) translateZ(100px) ;
}
#box #box1 #right{
background-color: #6698cb90;
transform: rotateY(90deg) translateZ(100px);
}
/* 创建动画 */
@keyframes dh{
0%{transform: rotateX(0deg) rotateZ(0deg) }
100%{transform: rotateX(360deg) rotateZ(360deg) }
}
#box #box1:hover #front{
background-color: #84fab080;
transform: translateZ(200px);
}
#box #box1:hover #back{
background-color: #84fab080;
transform: translateZ(-200px) rotateY(-180deg) ;
}
#box #box1:hover #top{
background-color: #84fab080;
transform: rotateX(90deg) translateZ(200px);
}
#box #box1:hover #bottom{
background-color: #84fab080;
transform: rotateX(-90deg) translateZ(200px);
}
#box #box1:hover #left{
background-color: #84fab080;
transform: rotateY(-90deg) translateZ(200px) ;
}
#box #box1:hover #right{
background-color: #84fab080;
transform: rotateY(90deg) translateZ(200px);
}
#box #box1 #i-front{
background-color: #FFFFFF90;
transform: translateZ(50px);
}
#box #box1 #i-back{
background-color: #FFFFFF90;
transform: translateZ(-50px) rotateY(-180deg) ;
}
#box #box1 #i-top{
background-color: #FFFFFF90;
transform: rotateX(90deg) translateZ(50px);
}
#box #box1 #i-bottom{
background-color: #FFFFFF90;
transform: rotateX(-90deg) translateZ(50px);
}
#box #box1 #i-left{
background-color: #FFFFFF90;
transform: rotateY(-90deg) translateZ(50px) ;
}
#box #box1 #i-right{
background-color: #FFFFFF90;
transform: rotateY(90deg) translateZ(50px);
}
注意
transform 属性的 ratate 和 translate 的顺序不可调换
