图片翻转

图片翻转
原文:图片翻转

本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。

这一节继续为大家介绍CSS3的动画效果: 图片翻转。 在iOS中的章节中,我也介绍过类似的效果,如果感兴趣的话,请点击这里查看:动画特效一:图片翻转 。

先看看最终的效果图:


一、所用素材:

       

两张图片的大小均为258 * 258。


二、思路分析:

从最终的效果图可以看出, "Baby" 默认是显示在前面的, 而 "小明" 是显示在后面的。并且旋转过来之后, "小明" 也应该是正面显示在前面,如素材所列出的。那么,默认情况下, "小明" 应该显示在后面,所以它需要绕着y轴旋转180°。立体图如下:



三、代码分析:

1. HTML代码:

<body><div id="box"><div class="xiaoming"></div><div class="angelababy"></div></div>
</body>

2. CSS代码:

<style type="text/css">#box{width:258px;height:258px;position: relative;}#box .xiaoming{width:258px;height:258px;position: absolute;top:0;left:0;border-radius:129px;-webkit-transform:rotateY(-180deg);/* FireFox对backface-visibility的支持有点问题*/-webkit-backface-visibility:hidden;background: url(xiaoming.png) no-repeat;transition:all 2s ease 0s;}#box .angelababy{width:258px;height:258px;position: absolute;top:0;left:0;border-radius:129px;-webkit-transform:rotateY(0deg);-webkit-backface-visibility:hidden;background: url(angelababy.png) no-repeat;transition:all 2s ease 0s;}#box:hover .xiaoming{-webkit-transform:rotateY(0deg);}#box:hover .angelababy{-webkit-transform:rotateY(-180deg);}</style>

1)#box 是父容器,用来存放 "Baby" 和 "小明" 的图片信息, 并且它的大小是 258 * 258, 就是所用素材图片的大小。因为它是父容器,所以设置position: relative.

2)由于"Baby" 和 "小明" 都是圆形显示,所以设置他们的 border-radius 为 129px; 即为图片宽度的一半。

3)由于 "小明" 默认是在后面的,而 "Baby" 是正面显示的,所以设置-webkit-transform属性值分别为 rotateY(-180deg) 和 rotateY(0)。

4)-webkit-backface-visibility 这个属性,如果不设置的话,图片就算翻转180°之后,还是可以看到翻转之后的图片的;这样的话,在翻转过程中,两张图片就会同时看到了,这样就达不到想要的效果了,大家可以将代码中的这个属性注释掉,可以看看效果。

5)transition这个属性是CSS3的一个特有属性,可以方便的用来执行动画过度效果。

对这个属性的支持,主流浏览器如下:


这个属性各个值的含义如下:

transition-property规定设置过渡效果的 CSS 属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。

本例中,所用的这个属性的第一个值,是设置为all。所以当元素有任何属性值发生变化的话,都会触发这个属性,执行动画。

6):hover 伪类就会触发鼠标进入或者离开时候的事件,而它触发的是元素的旋转属性,因此就会调用transition属性,进行图片的翻转效果。


posted on 2019-05-04 18:13 NET未来之路 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/10809234.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/264067.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【原】页面跳转以及表单提交中有中文的解决办法

这两天一直碰到一个郁闷的问题&#xff0c;在对表单进行提交的时候&#xff0c;用户名是中文的&#xff0c;怎么测试都不通过, 今天上午突然想起来是不是因为中文字符编码的问题!经过测试&#xff0c;果然是因为这个问题&#xff01; 现在把解决方法贴出来&#xff01;呵呵&…

架构设计学习网址

http://learninghard.blog.51cto.com/all/6146675转载于:https://www.cnblogs.com/haiy/p/4155727.html

实验吧之NSCTF misc250

下载的是一个流&#xff0c;用wireshark打开&#xff0c;由于原题是这样的&#xff1a;小绿在学习了wireshark后&#xff0c;在局域网内抓到了室友下载的小东东0.0 你能帮他找到吗&#xff1f;说明我们应该重点关注http传送的东西&#xff1a; 这里面一共有四个http文件&#x…

西澳大学商科专业排名_澳洲西澳大学优势专业排名多少

澳洲西澳大学优势专业排名多少西澳大学农业和林业专业在2018年QS世界排名中排名第32西澳大学解剖学和生理学专业在2018年QS世界排名中排名第13西澳大学地球与海洋科学专业在2018年QS世界排名中排名第32西澳大学土木结构工程专业在2018年QS世界排名中排名第37西澳大学矿产和采矿…

基于SOUI开发的应用展示

本页面列出基于SOUI开发的产品 欢迎使用SOUI的朋友提供资源&#xff1a;setoutsoft#qq.com #-> U大师 http://www.udashi.com EiisysIM: 是一款为工作场景而设计的企业即时通讯软件, &#xff0c;含PC版和手机版。具有完善的即时通讯、文件传输、语音通话等功能。通讯录由企…

供应商寄售库存管理_【论文解读】物流联合外包下库存管理模式对供应链运作的影响...

物流联合外包下库存管理模式对供应链运作的影响作者&#xff1a;冯颖&#xff0c;林晴&#xff0c;张景雄&#xff0c;张炎治目录 1 引言2 问题描述3 数学模型4 协调模型5 数值算例6 结论1 引言传统库存管理模式下&#xff0c;供应链中各节点企业的库存管理各自为政&#xff0c…

ViewState

因为现在的ASP.NET网站是基于http这种无状态协议的。大家应该都懂。 在ASP.NET的我们提交的一个页面&#xff0c;虽然看起来是一样的&#xff0c;但是他们本质上已经不是同一个页面了。而是我们现在看见的页 面获取了之前提交的那个页面的一些状态值。关于这点&#xff0c;到第…

查看自己Android设备分辨率

/*在Android中加入下面代码&#xff0c;用数据线连接上手机、运行下便知道自己Android设备的分辨率是多少了*/DisplayMetrics mDisplayMetrics new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(mDisplayMetrics);Log.i("Resolution",mDis…

python之布尔值——待补充……

61数据类型 633 3括号&#xff1a;{} [] () 3基本类型: int str bool 1:None 转载于:https://www.cnblogs.com/wjlv/p/10818455.html

SQLserver2000 实例管理工具

1、企业管理器是microsoft管理控制台(Microsoft management console)的一个插件。插件是运行在MMC中的部件、他不能独立运行&#xff0c;但必须包含着MMC中。企业管理器提供MMC形式的界面。像IIS、MTS也是MMC插件 2、查询分析器右边有模板选项卡&#xff0c;可以创建现成的模板…

linux设置nexus开机自启动_CentOS7配置nexus开机自启动

CentOS7配置nexus开机自启动新建nexus启动脚本进入/etc/init.d目录&#xff0c;新建脚本文件nexus// 进入/etc/init.d[rootlinux_maven etc]# cd /etc/init.d/// 新建脚本文件nexus[rootlinux_maven init.d]# vim nexus脚本内容:#!/bin/bash#chkconfig:2345 20 90#description:…

怎么看懂别人的代码

一&#xff0c;程序的结构及流程基本上是顺序&#xff0c;循环&#xff0c;选择。 二&#xff0c;业务数据---->对象形式(js-->{}, new function(){}/Java object) 业务流程---->传入参数&#xff0c;返回值。 流程可以先看作一步&#xff0c;然后再分为两步&#xff…

c语言6-2

#include<stdio.h> int main(){int a[3][3]{2,3,5,45,23,65,8,46,67};int s,t;sa[0][0]a[2][2]a[1][1];ta[0][2]a[1][1]a[2][0];printf("%d\n%d\n",s,t);return 0;} 转载于:https://www.cnblogs.com/p201821440019/p/10819405.html

怎么把ai从c盘移动到d盘_ai暂存盘怎么设置-AI设置暂存盘的教程 - 河东软件园

Adobe Illustrator简称AI&#xff0c;这款软件使用用户绘制图形的软件&#xff0c;它被大量的使用在了logo的设计中。相信每一位logo设计人员对它都不陌生吧&#xff1f;AI和PS都是同属于adobe旗下的图形设计软件&#xff0c;因此很多的设置功能都是一样的&#xff0c;例如暂存…

48个越吃越瘦的诀窍 - 生活至上,美容至尚!

1.吃好早餐。早餐是开启一天新陈代谢的钥匙。营养师推荐理想早餐&#xff1a;牛奶谷类&#xff08;面包、馒头、麦片等&#xff09;一份水果或蔬菜一个鸡蛋。2.每天25&#xff5e;30克的纤维。纤维不能被人体消耗吸收&#xff0c;但在体内停留时间长&#xff0c;能制造饱腹感&a…

c 最大子序列和_算法总结:左神class8—跳台阶+最长递增公共子序列

【跳台阶】有n级台阶&#xff0c;一个人每次上一级或者两级&#xff0c;问有多少种走完n级台阶的方法?public int s1(int n){ if (n< 1){ return 0; if(n 1 || n 2){ return n; return s1(n - 1) s1(n - 2);}【最长递增子序列长度】给定数组arr&#xff0c;返回arr…

[转载]dynamic的小坑--RuntimeBinderException:“object”未包含“xxx”的定义

创建一个控制台项目和一个类库项目, 在类库中创建一个匿名对象&#xff0c;然后在控制台中访问它&#xff0c;代码如下&#xff1a; 控制台: namespace ConsoleApplication1 {class Program{static void Main(string[] args){dynamic dyc ClassLibrary1.TestClass.Test();Cons…

mysql 触发器 定时触发_mysql 触发器和存储过程组合使用,实现定时触发操作

mysql可以实现定时触发功能&#xff0c;比如说定于某某时间mysql数据库做什么工作&#xff0c;或每隔多长时间做什么工作。第二种情况应用还是比较广的&#xff0c;比如说我希望每天检查一下我的数据信息&#xff0c;超过一个月的无用信息清除以腾出空间供其他存储数据使用&…

第5篇K8S创建资源的两种方式

一、创建方式分类&#xff1a;命令 vs 配置文件Kubernetes 支持两种方式创建资源&#xff1a;1.用 kubectl 命令直接创建&#xff0c;比如&#xff1a;kubectl run httpd-app --imagereg.yunwei.edu/learn/httpd:latest --replicas2在命令行中通过参数指定资源的属性。2. 通过配…

javascript 传多个参数的正则表达式(用来获取某个参数值)

例子: //javascript传参数(多个)var url "B.aspx?txtA"document.getElementById("txtName").value; url "&txtB"document.getElementById("txtAge").value; window.open(url,xWindow,width640,height400,statusno,toolbarno,men…