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

原文:利用纯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转换,思路都非常清晰。

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

时间: 2024-12-24 21:48:52

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

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

我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图. 如何,看上去挺不错吧,倾斜.阴影,让一张很普通的图片变得如此霸气. 另外你也可以在这里查看DEMO演示,鼠标滑过图片时会出现这样的效果. 那么接下来我们分析一下源码吧,显示html代码,非常简单: <div onclick=""> <figure> <figcaption>Autumn,

纯CSS3彩色边线3D立体按钮制作教程

今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示效果,而且我们把制作教程也分享出来,首先来看看效果图: 我们也可以在这里看到这些按钮的DEMO演示. 接下来就来分享一下制作教程以及源代码,按钮的源代码主要由HTML和CSS两部分代码组成,先来看看HTML代码: <button class="blue">     <div class="wrapper&q

超可爱 纯CSS3实现的小猪、小老鼠、小牛

原文:超可爱 纯CSS3实现的小猪.小老鼠.小牛 利用纯CSS3绘制一些人物.动物.风景已经不是一件新鲜的事情了,主要是利用CSS3可以让直线变成任意的曲线,于是简单的矢量图形绘制对CSS3来说就小菜一碟了.今天要分享一下超级可爱的纯CSS3实现的小猪.小老鼠.小牛,先看靓照: 我们可以在这里查看这三个小动物的DEMO演示. 接下来我们逐个来贴出实现这三个小动物的CSS代码 一.小猪 HTML代码: <div id="pig"> <div id="pig_h

纯CSS3实现的图片滑块程序 效果非常酷

原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性,没有使用JS,个人觉得还是挺不错的,先来看看效果图: 看上去挺不错的吧,简洁.清新.大气. 当然我们也可以在这里查看DEMO演示. 接下来我们一起来分析一下源码,首先是HTML代码,非常简单: <div id="gal"> <nav class="galnav

一款非常棒的纯CSS3 3D菜单演示及制作教程

原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大家,顺便来分析一下实现的源码.下面是效果图: 看了效果图是不是觉得它是一副麻将,对,第一眼我也认为是用CSS3写的麻将特效,结果我错了,它只是长得比较像而已. 另外,你也可以在这里直接查看菜单的DEMO演示. 接下来再分析一下实现这款3D菜单的源代码. 代码主要由HTML和CSS3组成,应该说还是比

Illustrator结合photoshop制作网页中的超漂亮的3D立体文字教程

给各位Illustrator软件的使用者们来详细的解析分享一下结合photoshop制作网页中的超漂亮的3D立体文字的教程. 教程分享: 先来看看最终的效果图!吧:   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的结合photoshop制作网页中的超漂亮的3D立体文字的教程解析分享的全部内容了,各位看到这里的使用者们相信各位现在是很清楚了制作方法了吧,那么各位就快去按照小编的教程去制作下自己想要的3D立体字吧.

纯CSS3透明水晶盒

相信大家有看过这个例子:3D盒子,在书<CSS3 实战>上第282页有个综合实战"设计动态立体盒子"的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改.优化,以及增添了一些细节,下面是我的盒子Firefox截图: 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个: 投影镜像,让盒子的立体感更强烈: 边角线的处理,让盒子面与面之间过渡和谐. 你可以点击这里下载 源代码(只是写了moz下的效果,we

CSS3设计动态立体盒子:CSS3透明水晶盒

文章简介:纯CSS3透明水晶盒. 相信大家有看过这个例子:3D盒子,在书<CSS3 实战>上第282页有个综合实战"设计动态立体盒子"的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改.优化,以及增添了一些细节,下面是我的盒子Firefox截图: 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个: 投影镜像,让盒子的立体感更强烈: 边角线的处理,让盒子面与面之间过渡和谐. 你可以点击这里下载 源

CSS3网页制作实例:纯CSS3打造的精致时钟

文章简介:在css3的渲染下,拥有华丽的视觉界面,这个纯css3精致时钟,你值得拥有! 今天为大家分享一个纯CSS3打造的精致时钟,没有用到任何的图片和 js .该时钟有时针.分针以及秒针,在时钟的圆盘内,都有详细的刻度标记,在时间中央还有数字时钟显示,功能可谓十分强大,界面十分精致. 在css3的渲染下,拥有华丽的视觉界面,这个纯css3精致时钟,你值得拥有! 其主要的实现原理是用animation.transform等属性来实现时钟的走动以及数字时钟的跳动:再结合使用linear-gradi