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太强大。
{ 发表评论 }
姓 名 (必填)
邮 件 (必填)
网 站