CSS3打造带阴影的旋转3D图像

Sponsor

CSS3可以实现很多创新好玩的交互效果，正如今天将和大家介绍的3D旋转图像，效果很漂亮，这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计，使得整体场景非常有感觉。

代码的实现也很简洁，下面来看看这个介绍和CSS代码教程，完全不需要JavaScript哦！纯CSS3打造。为了查看最佳效果，请使用Firefox浏览器浏览。

在线演示：DEMO查看 (请使用Firefox浏览)

正面：鼠标移上去就开始旋转

旋转中：这是旋转至背面的效果，以旋转并带半透明渐变的方式显示。

背面：旋转后，为图像添加一些文字介绍元素，充实这个元素。

代码教程

HTML代码准备

CSS代码

用Perspective属性给图像设置透视视图，使用浮动是为了制作成一个相册列表。设置宽度使用了百分比，为了兼容响应式设计而制作，大家在浏览DEMO的时候可以缩小浏览器看看效果。

.photo-container {

perspective: 1200px; /* 透视视图 */

width:45%;

float:left;

}

.rotate-box {

position:relative;

transform-style: preserve-3d; /* 3D 转换 */

transition:1s ease; /* 转换效果持续 1秒 */

margin:10%;

}

.rotate-box img {width:100%;height:auto;}

背面文本样式，透明背景，并设置默认为反转180度，其次要将图像置于图像的背面，所以这里我们利用z轴来控制，CSS代码如下：

.text {

position:absolute;top:0;

width:100%;height:100%;

transform: rotateY(180deg) translateZ(1px); /* 反转180度 并设置z轴让其置于图片背面 */

color:#666;

text-align:center;

opacity:.06;

background:rgba(255,255,255,.9);

transition: 1s opacity;

}

使用Hover来触发动画

.photo-container:hover .rotate-box{

transform: rotateY(180deg);

}

.photo-container:hover .text{opacity:1}

通过伪元素(:after)给图像添加一个透视阴影，使整体更有3D立体感觉。

.rotate-box:after {

content:' ';

display:block;

width:100%;

height:7vw; /* vw是移动设计备窗体单位*/

transform:rotateX(90deg);

background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); /* radial-gradient 是径向渐变 */

}

代码就这么多，如果有不理解或是有更好的建议欢迎在下方评论处留言。也希望借助这个例子能触发你们的创意灵感，CSS3日后必会成为主流，我们应该多点学习和使用这些新技术。

在线演示：DEMO查看 (请使用Firefox浏览)

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

琹①蕊╃嚮榮 -

2013 年 09 月 16 日 下午 2:54

怎么应用这代码呢？

琹①蕊╃嚮榮 -

2013 年 09 月 16 日 下午 2:54

没看明白。

晓风东东 -

2013 年 09 月 14 日 下午 4:34

效果很不错 赞一个

萨龙龙 -

2013 年 09 月 09 日 下午 1:16

效果震撼，CSS3太强大。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站