这个效果的代码如下:
<!doctype html> | |
<html> | |
<head> | |
<meta charset='UTF-8'> | |
<title>我的首页</title> | |
<style> | |
*{ | |
margin:0; | |
padding:0; | |
} | |
body{ | |
perspective:800px; | |
} | |
.box{ | |
position:relative; | |
width:200px; | |
height:200px; | |
margin:100px auto; | |
/* background-color:pink; */ | |
/* transform-origin:0 0; */ | |
/* transform:skew(0deg,0deg); */ | |
transform-style:preserve-3d;/*让子级元素 在 3D空间占据位置*/ | |
transition:10s; | |
} | |
.box:hover{ | |
transform:rotateX(360deg) rotateY(360deg); | |
} | |
.box .face{ | |
position:absolute; | |
left:0; | |
top:0; | |
width:200px; | |
height:200px; | |
/* background-color:rgba(0,0,0,.5); */ | |
box-shadow:0 0 10px 0 blue inset; | |
} | |
.box .front{ | |
transform:translateZ(100px); /* z轴平移100px */ | |
} | |
.box .behind{ | |
transform:rotateY(180deg) translateZ(100px); /* z轴平移100px */ | |
} | |
.box .left{ | |
transform:rotateY(-90deg) translateZ(100px); /* z轴平移100px */ | |
} | |
.box .right{ | |
transform:rotateY(90deg) translateZ(100px); /* z轴平移100px */ | |
} | |
.box .top{ | |
transform:rotateX(90deg) translateZ(100px); /* z轴平移100px */ | |
} | |
.box .bottom{ | |
transform:rotateX(-90deg) translateZ(100px); /* z轴平移100px */ | |
} | |
</style> | |
</head> | |
<body> | |
<div class="box"> | |
<div class="face top">上面</div> | |
<div class="face bottom">下面</div> | |
<div class="face left">左面</div> | |
<div class="face right">右面</div> | |
<div class="face front">前面</div> | |
<div class="face behind">后面</div> | |
</div> | |
</body> | |
</html> |
代码源于课堂老师.---海文老师.