纯CSS 3D旋转立体画册 第一弹

外层盒子+动画

效果

盒子

鼠标移入

HTML

<div class="content flex col-center row-center">
	<div class="hover">
		<!-- 立方体三维图片展示 -->
		<div class="box">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
	</div>
</div>

公共CSS样式

/*公共样式--开始*/
* {
    margin: 0;
    padding: 0;
	box-sizing: border-box;
}
html, body {
    min-height: 100%;
}
 
body {
    font-family: "Microsoft YaHei";
    font-size:14px;
    color:#333;
}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
ul,ol {
    list-style: none;
}
 
img {
    border: none;
    vertical-align: middle;
}
 
a {
    text-decoration: none;
    color: #232323;
}
 
table {
    border-collapse: collapse;
    table-layout: fixed;
}
 
input, textarea {
    outline: none;
    border: none;
}
 
textarea {
    resize: none;
    overflow: auto;
}
 
.clearfix {
    zoom: 1;
}
 
.clearfix:after {
    content: ".";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    overflow:hidden;
}
 
.fl {
    float: left
}
 
.fr {
    float: right
}
 
.tl {
    text-align: left;
}
 
.tc {
    text-align: center
}
 
.tr {
    text-align: right;
}
 
.ellipse {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inline{
    display: inline-block;
    *display: inline;
    *zoom: 1;
}


.flex{
	display: flex;
}
.col-center{
	align-items: center;
}
.col-top{
	align-items: flex-start;
}
.col-bottom{
	align-items: flex-end;
}
.row-center{
	justify-content: center;
}
.row-between{
	justify-content: space-between;
}
.row-evenly{
	justify-content: space-evenly;
}
.row-around{
	justify-content: space-around;
}
.flex-1{
	flex: 1;
}

页面CSS

.content {
	width: 100%;
	height: 80vh;
}

.hover{
	width: 200px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.box {
	width: 100px;
	height: 100px;
	transform-style: preserve-3d;
	perspective: 15000px;
	animation: Motion 5s linear 0s infinite normal;
}

.item {
	width: 100%;
	height: 100%;
	transition: all .5s;
}

.item:nth-child(1) {
	background: #e54d42;
}

.item:nth-child(2) {
	background: #f37b1d;
	transform-origin: 0 50% 0;
	transform: translateY(-100px) translateX(100px) translateZ(100px) rotateY(90deg);
}

.item:nth-child(3) {
	background: #fbbd08;
	transform-origin: 100% 50% 0;
	transform: translateY(-200px) translateX(-100px) rotateY(90deg);
}

.item:nth-child(4) {
	background: #8dc63f;
	transform-origin: 50% 100% 0;
	transform: translateY(-400px) translateX(0) translateZ(100px) rotateX(90deg);
}

.item:nth-child(5) {
	background: #39b54a;
	transform-origin: 50% 0 0;
	transform: translateY(-300px) translateX(0) rotateX(90deg);

}

.item:nth-child(6) {
	background: #1cbbb4;
	/* transform-origin: 50% 0 0; */
	transform: translateY(-500px) translateX(0) translateZ(100px) rotateX(0deg);
}

.hover:hover > .box > .item:nth-child(1){
	transform: translateZ(-50px);
}
.hover:hover > .box > .item:nth-child(2){
	transform: translateY(-100px) translateX(150px) translateZ(100px) rotateY(90deg);
}
.hover:hover > .box > .item:nth-child(3){
	transform: translateY(-200px) translateX(-150px) rotateY(90deg);
}
.hover:hover > .box > .item:nth-child(4){
	transform: translateY(-450px) translateX(0) translateZ(100px) rotateX(90deg);
}
.hover:hover > .box > .item:nth-child(5){
	transform: translateY(-250px) translateX(0) rotateX(90deg);
}
.hover:hover > .box > .item:nth-child(6){
	transform: translateY(-500px) translateX(0) translateZ(150px) rotateX(0deg);
}

@keyframes Motion{
	0{
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	10%{
		transform: rotateX(36deg) rotateY(36deg) rotateZ(72deg);
	}
	20%{
		transform: rotateX(72deg) rotateY(72deg) rotateZ(144deg);
	}
	30%{
		transform: rotateX(98deg) rotateY(98deg) rotateZ(216deg);
	}
	40%{
		transform: rotateX(144deg) rotateY(144deg) rotateZ(288deg);
	}
	50%{
		transform: rotateX(180deg) rotateY(180deg) rotateZ(360deg);
	}
	60%{
		transform: rotateX(216deg) rotateY(216deg) rotateZ(432deg);
	}
	70%{
		transform: rotateX(252deg) rotateY(252deg) rotateZ(504deg);
	}
	80%{
		transform: rotateX(288deg) rotateY(288deg) rotateZ(576deg);
	}
	90%{
		transform: rotateX(324deg) rotateY(324deg) rotateZ(648deg);
	}
	100%{
		transform: rotateX(360deg) rotateY(360deg) rotateZ(720deg);
	}
}