利用纯CSS3实现超立体的3D图片侧翻倾斜效果

上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效，觉得效果非常棒，其实话说回来，这玩意儿的实现真的非常简单，主要是创意不错。先来看看效果图。

如何，看上去挺不错吧，倾斜、阴影，让一张很普通的图片变得如此霸气。

另外你也可以在这里查看DEMO演示，鼠标滑过图片时会出现这样的效果。

那么接下来我们分析一下源码吧，显示html代码，非常简单：

<div onclick=""><figure><figcaption>Autumn, by Lucien Agasse</figcaption></figure>
</div>

这里用了HTML5的 figure标签，表示插图，没什么特别。

然后是CSS代码：

figure { margin: 0;width: 100%;height: 29.5vw;background: url("winter-hat.jpg");background-size: 100%; transform-origin: center bottom;transform-style: preserve-3d;transition: 1s transform;}
figure figcaption { width: 100%;background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("winter-hat.jpg");background-size: 100%; height: 50px;background-repeat: no-repeat;background-position: bottom;color: #fff; position: relative; top: 29.5vw;transform-origin: center top;transform: rotateX(-89.9deg);font-size: 1.2vw;font-family: Montserrat, Arial, sans-serif;text-align: center;line-height: 3;
}
figure:before {content: '';position: absolute; top: 0; left: 0;width: 100%; height: 100%;box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1);transition: 1s;transform: rotateX(95deg) translateZ(-80px) scale(0.75);transform-origin: inherit;
}

这里我们定义了figure的背景图片，也就是我们要实现3d效果的那张图片。同时还定义了图片的描述信息样式，这样在图片侧翻后更加凸显立体效果。

接下来就是鼠标滑过的动画效果了：

div:hover figure { transform: rotateX(75deg) translateZ(5vw);
}
div:hover figure:before {box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5);transform: rotateX(-5deg) translateZ(-80px) scale(1);}@media screen and (max-width: 800px) {div { width: 50%; } figure { height: 45vw; } figure figcaption { top: 45vw;font-size: 2vw;}
}@media screen and (max-width: 500px) {div { width: 80%; margin-top: 1rem; } figure { height: 70vw;} figure figcaption { top: 70vw;font-size: 3vw;}
}

很容易可以看出这里利用了css3的transform属性，其中rotateX来翻转，translateZ来实现Z轴的3D转换，思路都非常清晰。

最后，还是把源码分享一下，下载地址>>

转载于:https://www.cnblogs.com/html5tricks/p/3668494.html

利用纯CSS3实现超立体的3D图片侧翻倾斜效果相关推荐

纯CSS3实现超炫酷的萤火虫动画
纯CSS3实现超炫酷的萤火虫动画 120 人浏览发表回复今天要为大家带来一款很有意思的纯CSS3动画,这次我们要利用CSS3的一些动画属性来绘制一只闪闪发光的萤火虫,和之前分享的纯CSS3蚱蜢与纯 ...
纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
html流光效果图,利用纯CSS3绘制html网页流光文字
对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代.00后的请退避.你们卟懂绯紸流!因为你们毕竟是杀马特贵族!!比我们高贵. 还记得那些炫酷的签名档,或者那些炫酷的动态头像.当年可是卖到十几块钱 ...
超越纯CSS3，超赞阴影效果推荐-shine.js
前端开发whqet,csdn,王海庆,whqet,前端开发专家前段时间一直在忙微课比赛的事情,博客更新比较少,抱歉,今天抽空一更. 1.简介前面我们曾经用两篇文章<纯CSS3文字效果推荐&g ...
纯CSS3实现超酷炫的萤火虫动画
银烛秋光冷画屏,轻罗小扇扑流萤.仲夏之夜,花草从间,萤光舞动,构成一幅诗意的画面.如今用HTML5大显身手,可以做很多有意思的应用和游戏.今天我们要分享一个用纯CSS3做一个萤火虫动画的特效. 先来看 ...
纯CSS3实现超酷幻灯片图文切换效果
纯CSS3实现绚丽焦点图切换效果,这是一款纯CSS3实现的焦点图插件,焦点图设计十分清新简单,图片滑动特别流畅,是一款值得一用的CSS3焦点图.切换点通过表单radio来实现,通过radio的chec ...
纯css3鼠标经过出现文字或图片鼠标移走消失
2019独角兽企业重金招聘Python工程师标准>>> 纯css3鼠标经过出现图片鼠标移走消失(文字只需修改样式即可,需要相反的话只需改透明图) css.big_box{margin ...
java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果注:代码在chrome 43.0.2357 ...
html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效
在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果.最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的 ...
CSS3实现图片超立体3D效果
我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图. 如何,看上去挺不错吧,倾斜.阴影,让 ...

利用纯CSS3实现超立体的3D图片侧翻倾斜效果

利用纯CSS3实现超立体的3D图片侧翻倾斜效果相关推荐

最新文章

热门文章