CSS3 Transforms 3D 实现图片立体透视展示效果

CSS3的Transforms该属性允许我们对元素进行旋转、缩放、移动或倾斜。DEMO中是一个国外网友分享的用CSS3实现图片3D悬浮效果，图片看起来非常酷，CSS3实现起来非常简单。

如果网页中图片加上倾斜、阴影、3D 等效果就可以让一张张很普通的图片变得非常酷。建议在google浏览器下查看DEMO的效果。

下面直接上实现的源代码吧。首选添加一个显示容器和显示两张展示的图片容器

HTML代码

<ul class="grid">
	<li class="one"><span class="s"></span></li>
	<li class="two"><span class="s"></span></li>
</ul>

CSS3代码中主要用到 transform的rotateX()和rotateZ() 前者是定义沿着 X 轴的 3D 旋转；后者是定义沿着 Z 轴的 3D 旋转。

图片左边框和底部框的实现在grid li:before, .grid li:after 中 其他的看下面CSS代码吧

CSS代码

.grid {
	position: absolute; top: 100px; left: 0px;
	/*Width = (225 + 20 + 20) * 4 = 1060*/
	width: 1060;
	/*3D Transform */
	transform: rotateX(60deg) rotateZ(-50deg);
	transform-style: preserve-3d;
}
.grid li {
	height: 400px; width: 225px;
	float: left; margin: 20px;
	list-style-type: none;
	/*Hide the lighting gradient from the front face*/
	background-size: 0, cover;
	/*Preserve 3D style for children(pseudo elements)*/
	transform-style: preserve-3d;
}
/* Left and Bottom Sides*/
.grid li:before, .grid li:after {
	content: '';
	position: absolute;
	/*100% height and width*/
	top: 0; left: 0; right: 0; bottom: 0;
	background: inherit;
	background-size: cover; 
}
/*Left Side*/
.grid li:before {
	transform-origin: left center;
	transform: rotateY(90deg);
	/*Reducing the width of the left side for a flat feel*/
	width: 5px;
}
/*Bottom Side*/
.grid li:after {
	transform-origin: bottom center;
	transform: rotateX(90deg);
	/*Reducing the height*/
	height: 5px; top: auto; bottom: 0;
	/*Background fix - start the background from the bottom*/
	background-position: bottom center;
}
/*Shadow time - sadly all pseudo elements are used so we will have to add an HTML element in each LI*/
.s {
	position: absolute;
	/*30px smaller from each side*/
	top: 30px; left: 30px; right: 30px; bottom: 30px;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 30px 30px rgba(0, 0, 0, 0.5);
	/*Pushing down the shadow to give an elevated feel*/
	transform: translateZ(-50px);
}
/*We will add a light gradient to the sides to give some lighting effect*/
.one {
	background: 
		linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), 
		url("app1.png");
}
.two {
	background: 
		linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), 
		url("app2.png");
}