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 相关文章推荐
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 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
如何写php程序?
2006/12/08 PHP
PHP中PDO的错误处理
2011/09/04 PHP
mac下安装nginx和php
2013/11/04 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
laravel5.6实现数值转换
2019/10/23 PHP
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
python实现音乐下载的统计
2018/06/20 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
Delphi工程师笔试题
2013/09/21 面试题
产品发布会策划方案
2014/05/12 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
幼师求职自荐信
2015/03/26 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
结婚仪式主持词
2015/06/29 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
Python爬虫基础初探selenium
2021/05/31 Python
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技