html+css一个展示图片的盒子

C3旋转盒子：用css3新特性写一个展示图片的盒子。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.out-wrap{position: absolute;width: 200px;height: 200px;top: 50%;left: 50%;transform: translate(-50% -50%);
			transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);animation: rota 15s linear infinite;}
			@-webkit-keyframes rota{from{transform:rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}
			.out-wrap>div{position: absolute; width: 100%;height: 100%;opacity: 0.6;}/*相对父元素定位不可舍弃,这是图片拼接的关键链接点*/
			.out-wrap>span{display: block;position:absolute;top:25%;left:25%;width: 50%;height: 50%;}
			.out-wrap>div>a,.out-wrap>span>a,.out-pic,.in-pic{display: block;width: 100%;height: 100%;}
			.out-front{transform: rotateY(0deg) translateZ(100px);}
			.out-back{transform: rotateY(180deg) translateZ(100px) ;}
			.out-left{transform: rotateY(-90deg) translateZ(100px);}
			.out-right{transform: rotateY(90deg) translateZ(100px);}
			.out-top{transform: rotateX(90deg) translateZ(100px);}
 			.out-bottom{transform: rotateX(-90deg) translateZ(100px);}
 			.in-front{transform: rotateY(0deg) translateZ(50px);}
			.in-back{transform: translateZ(-50px) rotateY(180deg);}
			.in-left{transform: rotateY(-90deg) translateZ(50px);}
			.in-right{transform: rotateY(90deg) translateZ(50px);}
			.in-top{transform: rotateX(90deg) translateZ(50px);}
 			.in-bottom{transform: rotateX(-90deg) translateZ(50px);}
 			.out-wrap:hover .out-front{transform: rotateY(0deg) translateZ(200px);}
			.out-wrap:hover .out-back{transform: translateZ(-200px) rotateY(180deg);}
			.out-wrap:hover .out-left{transform: rotateY(-90deg) translateZ(200px);}
			.out-wrap:hover .out-right{transform: rotateY(90deg) translateZ(200px);}
			.out-wrap:hover .out-top{transform: rotateX(90deg) translateZ(200px);}
 			.out-wrap:hover .out-bottom{transform: rotateX(-90deg) translateZ(200px);}
		</style>
	</head>
	<body>
			<div class="out-wrap">
				<div class="out-front"><a><img src="" class="out-pic"/></a></div>
				<div class="out-back"><a><img src="" class="out-pic"/></a></div>
				<div class="out-left"><a><img src="" class="out-pic"/></a></div>
				<div class="out-right"><a><img src="" class="out-pic"/></a></div>
				<div class="out-top"><a><img src="" class="out-pic"/></a></div>
				<div class="out-bottom"><a><img src="" class="out-pic"/></a></div>
				<span class="in-front"><a><img src="" class="in-pic"/></a></span>
				<span class="in-back"><a><img src="" class="in-pic"/></a></a></span>
				<span class="in-left"><a><img src="" class="in-pic"/></a></a></span>
				<span class="in-right"><a><img src="" class="in-pic"/></a></a></span>
				<span class="in-top"><a><img src="" class="in-pic"/></a></a></span>
				<span class="in-bottom"><a><img src="" class="in-pic"/></a></a></span>
			</div>
	</body>
</html>
图片自行添加。
html+css一个展示图片的盒子

猜你喜欢
