css3怎么实现超立体3D图片侧翻倾斜效果-创新互联

这篇文章主要讲解了“css3怎么实现超立体3D图片侧翻倾斜效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3怎么实现超立体3D图片侧翻倾斜效果”吧!

成都创新互联公司是一家专注网站建设、网络营销策划、小程序制作、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十余年以来,已经为近1000家成都公路钻孔机各业的企业公司提供互联网服务。现在,服务的近1000家客户与我们一路同行,见证我们的成长;未来,我们一起分享成功的喜悦。

css3怎么实现超立体3D图片侧翻倾斜效果

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

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

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

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

代码如下:



 

   
Autumn, by Lucien Agasse

 


这里用了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怎么实现超立体3D图片侧翻倾斜效果”的内容了,经过本文的学习后,相信大家对css3怎么实现超立体3D图片侧翻倾斜效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!


分享文章:css3怎么实现超立体3D图片侧翻倾斜效果-创新互联
标题路径:http://pwwzsj.com/article/dgshop.html