欢迎您光临优码网!

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");
}


 

1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。