“21天好习惯”第一期-9

（纯CSS实现一个正方体相册效果）

有一个正方体，每个面可以放一张照片，然后它会自己转动，当鼠标悬浮于相册上时会照片展开。

 HTML

<div class="containter">
			<div class="box1 box"><img src="" ></div>        //src是图片的地址
			<div class="box2 box"><img src="" ></div>
			<div class="box3 box"><img src="" ></div>
			<div class="box4 box"><img src="" ></div>
			<div class="box5 box"><img src="" ></div>
			<div class="box6 box"><img src="" ></div>
</div> 

CSS

* {
	margin: 0;
	padding: 0;
}
.containter {
	position: relative;
	left: 600px;
	top: 250px;
	width: 300px;
	height: 300px;
	transform-style: preserve-3d;
	/* background-color: black; */
	transform: rotateX(-20deg) rotateY(-20deg);
	animation: boxall 12s linear alternate infinite;
}
.box {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.7;
}
.box img {
	width: 100%;
	height: 100%;
}
.box1 {
	transform: translateZ(150px);
}
 .box2 {
	transform: rotateY(180deg) translateZ(150px);
}
.box3 {
	transform: rotateY(90deg) translateZ(150px);
}
.box4 {	
	transform: rotateY(-90deg) translateZ(150px);
}
.box5 {
	transform: rotateX(90deg) translateZ(150px);
}
.box6 {
	transform: rotateX(-90deg) translateZ(150px);
}
@keyframes boxall{
	0%,5%{
		transform: rotateY(90deg);
	}
	20%, 25%{
		transform: rotateY(180deg);
	}
	40% ,45%{
		transform: rotateY(270deg);
	}
	60% ,65%{
		transform: rotateX(90deg);
	}
	80% ,85%{
		transform: rotateX(-90deg);
	}
	 100% {
		transform: rotateY(90deg);
	}
}
.containter:hover .box1{
	transform: scale(1.2) translateZ(300px);
}
.containter:hover .box2{
	transform: rotateY(180deg) scale(1.2) translateZ(300px);
}
.containter:hover .box3{
	transform: rotateY(90deg) scale(1.2) translateZ(300px);
}

.containter:hover .box4{
	transform: rotateY(-90deg) scale(1.2) translateZ(300px);
}
.containter:hover .box5{
	transform: rotateX(90deg) scale(1.2) translateZ(300px);
}
.containter:hover .box6{
	transform: rotateX(-90deg) scale(1.2) translateZ(300px);
}

 有不懂的可以在评论区问我。