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


Posted in HTML / CSS onApril 16, 2014

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);
}</p> <p>@media screen and (max-width: 800px) {
div { width: 50%; }
figure { height: 45vw; }
figure figcaption {
top: 45vw;
font-size: 2vw;
}
}</p> <p>@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转换,思路都非常清晰。
HTML / CSS 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 #HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 #HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 #HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 #HTML / CSS
css3新增颜色表示方式分享
Apr 15 #HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 #HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 #HTML / CSS
You might like
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
javascript eval函数深入认识
2009/02/21 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
python如何快速拼接字符串
2020/10/28 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
家长会邀请书
2014/01/25 职场文书
班班通项目实施方案
2014/02/25 职场文书
机电一体化求职信
2014/03/10 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python