CSS3实现图片超立体3D效果

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

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

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

那么接下来我们分析一下源码吧，显示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转换，思路都非常清晰。

最后，还是把源码分享一下CSS3源码

CSS3实现图片超立体3D效果相关推荐

CSS打造图片翻转立体3D效果
一.案例效果展示二.搭建一个基本的html结构,将需要用到的图片居中 html的结构非常简单,只要一个盒子里面放二张照片即可 html代码: <div class="img_box& ...
css立体3d效果动画,css3 实现动画，变换基点及3D效果~
各位小伙伴上次分享的爱心感觉如何呀~ 动画效果首先,娜娜在这边给大家认个错,上次分享落下了一个东西,就是动画效果,没有动画是实现不了爱心一条一条的动作的. 虽然那个爱心源代码已经给大家了,只要复制 ...
android立体3D效果_怀化400T吨龙门剪图纸3d模型_临沂1500T吨剪图纸原理图-皇宏液压...
皇宏液压为您详细解读yddYIm怀化400T龙门剪图纸3d模型的相关知识与详情, 接触过超影3D印刷的伴侣们,想必必然对陈某们有所理解,超影3D印刷服务商拥有强大的3D印刷经历的团队,不单正在3D ...
css能实现哪些动画,推荐9款使用CSS3实现的超酷动画效果
大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...
css3动画、2D与3D效果
1.兼容性 css3针对同一样式在不同浏览器的兼容需要在样式属性前加上内核前缀: 谷歌(chrome) -webkit-transition: Opera(欧鹏) -o-transition: ...
android立体3D效果_Android实现八大行星绕太阳3D旋转效果
code小生一个专注大前端领域的技术平台公众号回复Android加入安卓技术群作者:史蒂芬诺夫斯基链接:https://www.jianshu.com/p/2954f2ef8ea5声明:本文已获史 ...
android立体3D效果_PS教程：铝膜气球字制作的完整教程，3D立体效果字体的制作...
这一篇主要是用PS做一种3D立体字体效果,铝膜气球字体,当然学会之后,举一反三,可以做成其他图案的铝膜气球效果. 铝膜气球在目前的各种庆典,婚庆,庆贺宴席上,用的比较普遍:这个字体效果,后期可以用于室 ...
android立体3D效果_3D全息投影和平面投影有什么区别_广州全息投影
随着时代的发展.科技的进步,3D全息投影已经融入到人们的日常生活当中,给人们带来全新的视觉体验,呈现亦真亦幻的虚拟影像世界,越来越多的行业肯定及选择全息投影技术.那么与传统的平面投影相比,3D全息投影 ...
android立体3D效果_谷歌裸眼3D动物意外蹿红，掀起一股AR体验小高潮
疫情在国外来势汹汹,越来越多人不得不长期待在家中.这个时候如果手指闲不住,不如试试在谷歌搜索中检索动物,就会有栩栩如生的 3D"动物"空降你家,而且其违和感已相较之前大大降低. 在 ...

CSS3实现图片超立体3D效果

CSS3实现图片超立体3D效果相关推荐

最新文章

热门文章