自定义魔方相册-优快云博客

话不多说，先上效果：
在这里插入图片描述

效果：能够自定义魔方上的八张照片，魔方大小位置以及背景图，鼠标悬浮魔方上方，魔方会有打开效果，是不是很酷炫。
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<style>
		/*主页面背景图片*/
		body{
			background-image: url(img/3.jpg);
		}
		/*最外层容器样式*/
		.wrap {
			width: 200px;
			height: 200px;
			margin: 200px;
			position: relative;
			
		}

		/*包裹所有容器样式*/
		.cube {
			width: 200px;
			height: 200px;
			margin: 0 auto;
			transform-style: preserve-3d;
			transform: rotateX(-30deg) rotateY(-80deg);
			animation: rotate linear 20s infinite;
		}

		@-webkit-keyframes rotate {
			from {
				transform: rotateX(0deg) rotateY(0deg);
			}
			to {
				transform: rotateX(360deg) rotateY(360deg);
			}
		}

		.cube div {
			position: absolute;
			width: 200px;
			height: 200px;
			opacity: 0.8;
			transition: all .4s;
		}

		/*定义所有图片样式*/
		.pic {
			width: 200px;
			height: 200px;
		}

		.cube .out_front {
			transform: rotateY(0deg) translateZ(100px);
		}

		.cube .out_back {
			transform: translateZ(-100px) rotateY(180deg);
		}

		.cube .out_left {
			transform: rotateY(-90deg) translateZ(100px);
		}

		.cube .out_right {
			transform: rotateY(90deg) translateZ(100px);
		}

		.cube .out_top {
			transform: rotateX(90deg) translateZ(100px);
		}

		.cube .out_bottom {
			transform: rotateX(-90deg) translateZ(100px);
		}

		/*定义小正方体样式*/
		.cube span {
			display: block;
			width: 100px;
			height: 100px;
			position: absolute;
			top: 50px;
			left: 50px;
		}

		.cube .in_pic {
			width: 100px;
			height: 100px;
		}

		.cube .in_front {
			transform: rotateY(0deg) translateZ(50px);
		}

		.cube .in_back {
			transform: translateZ(-50px) rotateY(180deg);
		}

		.cube .in_left {
			transform: rotateY(-90deg) translateZ(50px);
		}

		.cube .in_right {
			transform: rotateY(90deg) translateZ(50px);
		}

		.cube .in_top {
			transform: rotateX(90deg) translateZ(50px);
		}

		.cube .in_bottom {
			transform: rotateX(-90deg) translateZ(50px);
		}

		/*鼠标移入后样式*/
		.cube:hover .out_front {
			transform: rotateY(0deg) translateZ(200px);
		}

		.cube:hover .out_back {
			transform: translateZ(-200px) rotateY(180deg);
		}

		.cube:hover .out_left {
			transform: rotateY(-90deg) translateZ(200px);
		}

		.cube:hover .out_right {
			transform: rotateY(90deg) translateZ(200px);
		}

		.cube:hover .out_top {
			transform: rotateX(90deg) translateZ(200px);
		}

		.cube:hover .out_bottom {
			transform: rotateX(-90deg) translateZ(200px);
		}
	</style>
</head>

<body>
	<!-- 外层最大容器 -->
	<div class="wrap">
		<!--包裹所有元素的容器-->
		<div class="cube">
			<!--前面图片 -->
			<div class="out_front">
				<img src="img/2.jpg" class="pic" />
			</div>
			<!--后面图片 -->
			<div class="out_back">
				<img src="img/20141129042645682.jpg.source.jpg" class="pic" />
			</div>
			<!--左面图片 -->
			<div class="out_left">
				<img src="img/20141202023701441.jpg.source.jpg" class="pic" />
			</div>
			<!--右面图片 -->
			<div class="out_right">
				<img src="img/20141202023704566.jpg.source.jpg" class="pic" />
			</div>
			<!--上面图片 -->
			<div class="out_top">
				<img src="img/3.jpg" class="pic" />
			</div>
			<!--下面图片 -->
			<div class="out_bottom">
				<img src="img/kobe_bryant.jpg" class="pic" />
			</div>

			<!--小正方体 -->
			<span class="in_front">
				<img src="img/2.jpg" class="in_pic" />
			</span>
			<span class="in_back">
			     <img src="img/20141129042645682.jpg.source.jpg" class="in_pic" />
			</span>
			<span class="in_left">
				<img src="img/20141202023701441.jpg.source.jpg" class="in_pic" />
			</span>
			<span class="in_right">
				<img src="img/20141202023704566.jpg.source.jpg" class="in_pic" />
			</span>
			<span class="in_top">
				<img src="img/3.jpg" class="in_pic" />
			</span>
			<span class="in_bottom">
				<img src="img/kobe_bryant.jpg" class="in_pic" />
			</span>
		</div>

	</div>
</body>

</html>