在博客上看到了 CSS3 3D旋转盒子加缩放——WEB(二)， 被震撼到了，于是打算跟着敲一个。
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D</title>
<style>
/* 所有元素都设置外边距，内边距为0 */
* {
margin: 0;
padding: 0;
}
/* 设置body背景位黑色 */
body {
background-color: #000000;
}
/* 设置包装类 的高度，外边距与父容器的距离 */
.wrap {
height: 200px;
margin-top: 200px;
/* 3、给爷爷加景深 */
perspective: 1000px;
/* 设置观看位置 */
perspective-origin: 50% 50%;
}
/* 为立方体添加3d效果 */
.wrap .cube {
/* 2、父级相对定位,居中显示 */
position: relative;
width: 12.5rem;
height: 12.5rem;
margin: 0 auto;
/* 4、爸爸加3d,因为最后旋转的是爸爸 */
transform-style: preserve-3d;
animation: box 10s linear infinite;
/* 5、在chrome开发者工具调试旋转父级查看效果 */
transform: rotateX(0deg) rotateY(0deg);
}
/* 定义动画，绕x,y,z轴旋转 */
@keyframes box {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
/* big box 立方体的每一个面水平居中,并为每个面设置了一个动画*/
.wrap .cube div {
/*/2、自己为绝对定位相对于父级,把6个面盒子全部放进来 */
position: absolute;
top: 0;
left: 0;
/*/1、相对于父级100% */
width: 100%;
height: 100%;
border: 0px solid black;
font-size: 1.25rem;
color: white;
text-align: center;
line-height: 200px;
transition: transform .3s ease-in;
}
/* 5、设置立方体的每个面 */
.wrap .cube .front {
background-image: url(img/7.jpg);
background-size: auto 100%;
transform: translateZ(100px);
}
.wrap .cube .back {
background-image: url(img/8.jpg);
background-size: auto 100%;
transform: translateZ(-100px) rotateY(180deg);
}
.wrap .cube .right {
background-image: url(img/9.jpg);
background-size: auto 100%;
transform: rotateY(90deg) translateZ(100px);
}
.wrap .cube .left {
background-image: url(img/10.jpg);
background-size: auto 100%;
transform: rotateY(-90deg) translateZ(100px);
}
.wrap .cube .top {
background-image: url(img/11.jpg);
background-size: auto 100%;
transform: rotateX(90deg) translateZ(100px);
}
.wrap .cube .bottom {
background-image: url(img/12.jpg);
background-size: auto 100%;
transform: rotateX(-90deg) translateZ(100px);
}
/* 6、让i居中，i使用同一张图片包装立方体*/
.wrap .cube i {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
border: 1px solid black;
}
/* 立方体先用6张相同的图片包裹起来 */
.wrap .cube .ifront {
background-image: url(img/1.jpg);
background-size: auto 100%;
transform: translateZ(50px);
}
.wrap .cube .iback {
background-image: url(img/2.jpg);
background-size: auto 100%;
transform: translateZ(-50px) rotateY(180deg);
}
.wrap .cube .iright {
background-image: url(img/3.jpg);
background-size: auto 100%;
transform: rotateY(90deg) translateZ(50px);
}
.wrap .cube .ileft {
background-image: url(img/4.jpg);
background-size: auto 100%;
transform: rotateY(-90deg) translateZ(50px);
}
.wrap .cube .itop {
background-image: url(img/5.jpg);
background-size: auto 100%;
transform: rotateX(90deg) translateZ(50px);
}
.wrap .cube .ibottom {
background-image: url(img/6.jpg);
background-size: auto 100%;
transform: rotateX(-90deg) translateZ(50px);
}
/* 7、hover box，替换立方体的每一个面的图片 */
.wrap .cube:hover .front {
background-image: url(img/1.jpg);
background-size: auto 100%;
transform: translateZ(200px);
}
.wrap .cube:hover .back {
background-image: url(img/2.jpg);
background-size: auto 100%;
transform: translateZ(-200px) rotateY(180deg);
/*先沿z轴移动，再旋转*/
}
.wrap .cube:hover .right {
background-image: url(img/3.jpg);
background-size: auto 100%;
transform: rotateY(90deg) translateZ(200px);
/*先沿z轴移动，再旋转*/
}
.wrap .cube:hover .left {
background-image: url(img/4.jpg);
background-size: auto 100%;
transform: rotateY(-90deg) translateZ(200px);
/*先沿z轴移动，再旋转*/
}
.wrap .cube:hover .top {
background-image: url(img/5.jpg);
background-size: auto 100%;
transform: rotateX(90deg) translateZ(200px);
/*先沿z轴移动，再旋转*/
}
.wrap .cube:hover .bottom {
background-image: url(img/6.jpg);
background-size: auto 100%;
transform: rotateX(-90deg) translateZ(200px);
/*先沿z轴移动，再旋转*/
}
</style>
</head>
<body>
<div class="wrap">
<!-- 我们有两个立方体，内部哪个立方体6个面的图片始终不变。而外部的立方体，当鼠标移上时，替换6个面的图片 -->
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="top"></div>
<div class="bottom"></div>
<i class="ifront"></i>
<i class="iback"></i>
<i class="iright"></i>
<i class="ileft"></i>
<i class="itop"></i>
<i class="ibottom"></i>
</div>
</body>
</html>
运行效果：
涉及到的知识
参考文献
