<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8">
<title></title>
<style type=
"text/css">
body{
background: skyblue;
}
html,body{
height: 100%
;;
}
#box1{
width: 100%
;
height: 100%
;
}
#box2{
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
transform-style: preserve-
3d;
/*perspective: 500px;*/
animation: a 10s linear infinite;
}
.box{
position: absolute;
height: 200px;
width: 200px;
border: 1px solid #fff;
background: rgba(0,
0,
0,.
5);
transition: transform 2s ease-
in;
color: #fff;
font-
size: 25px;
font-
weight: bold;
line-
height: 200px;
text-
align: center;
}
.small{
position: absolute;
top: 50px;
left: 50px;
height: 100px;
width: 100px;
border: 1px solid #000;
background: rgba(255,
255,
255,
1);
transition: transform 2s ease-
in;
}
#before{
transform: translateZ(100px);
}
#after{
transform: translateZ(-
100px);
}
#left{
transform: rotateY(90deg) translateZ(100px);
}
#right{
transform: rotateY(90deg) translateZ(-
100px);
}
#up{
transform: rotateX(90deg) translateZ(100px);
}
#down{
transform: rotateX(90deg) translateZ(-
100px);
}
#s-
before{
transform: translateZ(50px);
}
#s-
after{
transform: translateZ(-
50px);
}
#s-
left{
transform: rotateY(90deg) translateZ(50px);
}
#s-
right{
transform: rotateY(90deg) translateZ(-
50px);
}
#s-
up{
transform: rotateX(90deg) translateZ(50px);
}
#s-
down{
transform: rotateX(90deg) translateZ(-
50px);
}
#box2:hover #before{
transform: translateZ(300px);
}
#box2:hover #after{
transform: translateZ(-
300px);
}
#box2:hover #left{
transform: rotateY(90deg) translateZ(300px);
}
#box2:hover #right{
transform: rotateY(90deg) translateZ(-
300px);
}
#box2:hover #up{
transform: rotateX(90deg) translateZ(300px);
}
#box2:hover #down{
transform: rotateX(90deg) translateZ(-
300px);
}
@-webkit-
keyframes a{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div id=
"box1">
<div id=
"box2">
<div id=
"before" class=
"box">
前面
</div>
<div id=
"after" class=
"box">
后面
</div>
<div id=
"left" class=
"box">
左面
</div>
<div id=
"right" class=
"box">
右面
</div>
<div id=
"up" class=
"box">
上面
</div>
<div id=
"down" class=
"box">
下面
</div>
<span
class=
"small" id=
"s-before"></span>
<span
class=
"small" id=
"s-after"></span>
<span
class=
"small" id=
"s-left"></span>
<span
class=
"small" id=
"s-right"></span>
<span
class=
"small" id=
"s-up"></span>
<span
class=
"small" id=
"s-down"></span>
</div>
</div>
</body>
</html>
本次的这个demo用了CSS3中的2d和3d属性，完成了一个盒子的立体效果
转载于:https://www.cnblogs.com/wmwPro/p/5631853.html
