html旋转有阴影,CSS3打造带阴影的旋转3D图像
转至:http://www.shejidaren.com/css-3d-p_w_picpaths-flip-gallery.html
CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使得整体场景非常有感觉。
代码的实现也很简洁,下面来看看这个介绍和CSS代码教程,完全不需要JavaScript哦!纯CSS3打造。为了查看最佳效果,请使用Firefox浏览器浏览。
在线演示:DEMO查看 (请使用Firefox浏览)
正面:鼠标移上去就开始旋转
旋转中:这是旋转至背面的效果,以旋转并带半透明渐变的方式显示。
背面:旋转后,为图像添加一些文字介绍元素,充实这个元素。
代码教程
HTML代码准备
这是一个标题
这是一段图片相关的简介内容。。
CSS代码
用Perspective属性给图像设置透视视图,使用浮动是为了制作成一个相册列表。设置宽度使用了百分比,为了兼容响应式设计而制作,大家在浏览DEMO的时候可以缩小浏览器看看效果。.photo-container {
perspective: 1200px; /* 透视视图 */
width:45%;
float:left;
}
.rotate-box {
position:relative;
transform-style: preserve-3d; /* 3D 转换 */
transition:1s ease; /* 转换效果持续 1秒 */
margin:10%;
}
.rotate-box img {width:100%;height:auto;}
背面文本样式,透明背景,并设置默认为反转180度,其次要将图像置于图像的背面,所以这里我们利用z轴来控制,CSS代码如下:.text {
position:absolute;top:0;
width:100%;height:100%;
transform: rotateY(180deg) translateZ(1px); /* 反转180度 并设置z轴让其置于图片背面 */
color:#666;
text-align:center;
opacity:.06;
background:rgba(255,255,255,.9);
transition: 1s opacity;
}
使用Hover来触发动画.photo-container:hover .rotate-box{
transform: rotateY(180deg);
}
.photo-container:hover .text{opacity:1}
通过伪元素(:after)给图像添加一个透视阴影,使整体更有3D立体感觉。.rotate-box:after {
content:' ';
display:block;
width:100%;
height:7vw; /* vw是移动设计备窗体单位*/
transform:rotateX(90deg);
background-p_w_picpath: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); /* radial-gradient 是径向渐变 */
}
代码就这么多,如果有不理解或是有更好的建议欢迎在下方评论处留言。也希望借助这个例子能触发你们的创意灵感,CSS3日后必会成为主流,我们应该多点学习和使用这些新技术。
html旋转有阴影,CSS3打造带阴影的旋转3D图像相关推荐
- html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像
CSS3打造带阴影的旋转3D图像 Sponsor CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使 ...
- CSS3实现带阴影的弹球
实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head><meta char ...
- css 一条线加阴影,CSS3实现曲线阴影和翘边阴影
html> CSS3实现曲线阴影和翘边阴影 /*源于imooc的学习*/ body { font-family: "微软雅黑", "Microsoft YaHei& ...
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果.就是鼠标移到元素上,感觉能够看到元素背后的信息. 大家假设制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语, ...
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果 以及图片提交
今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相册之后都可以 ...
- css3动画旋转360度,CSS3动画(360度旋转、旋转放大、放大、移动)
Title div{ width:120px; height:120px; line-height:120px; margin: 20px; background-color: #5cb85c; fl ...
- 使用html css实现180箭头旋转,jQuery和css3控制箭头丝滑旋转
.user-arrow{//这是箭头的样式 width:12px; position:absolute; right:26px; margin-top: 8px; cursor:pointer; di ...
- HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
最新文章
- 美多商城之购物车(购物车存储方案)
- HDU_1087-Super Jumping! Jumping! Jumping!
- ionic 定位 android,ionic3定位 (android)
- realloc函数在使用上要注意什么问题
- P2774 方格取数问题
- Scanner类的基本总结
- 【转】Oracle回收站(recyclebin)
- struts2:JSON在struts中的应用(JSP页面中将对象转换为JSON字符串提交、JSP页面中获取后台Response返回的JSON对象)...
- VC++编程实现镜像劫持
- 使用Origin绘制弦图全流程
- C# 使用 itextsharp
- OpenCV车牌识别
- 大气数据计算机英语,大气数据计算机(ADC)
- null 和 undefined 的区别
- STM32串口通信程序模拟超市打印机工作-使用接收中断、空闲中断、校验中断
- 运维工程师 主要是做什么的?
- 微带线特性阻抗计算公式_几种计算微带线特性阻抗的方法.pdf
- sqlyog恢复查询记录
- UC搭档云计算:前景广阔
- RSA der加密 p12解密以及配合AES使用详解
热门文章
- 搭建自己的pdf在线预览工具
- samsung.android.sdk,Android应用无法在Samsung Galaxy Apps上提交(如何包含Samsung SDK?)
- subsystem for linux,微软披露Windows Subsystem for Linux细节
- 电脑蓝屏故障分析大全
- 基于百度EasyDL定制化图像识别平台的海洋鱼类识别方法
- 行人重识别——将多个数据集格式统一为market1501格式,打造超大规模的REID数据集
- 使用华为手机拍照,这3个功能都不会用,怎么能拍出大片呢
- 华为ensp BGP 练习实验
- 单片机采用RLE算法实现液晶屏显示图片
- Maven的聚合和继承(六)