图片翻转

图片翻转
原文:图片翻转

本人录制技术视频地址: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;呵呵&…

实验吧之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…

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:…

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;例如暂存…

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…

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

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

bind安装配置以及应用

实验环境&#xff1a;两台centos6.6服务器&#xff0c;主DNS服务器IP为172.26.249.29&#xff0c;从DNS服务器IP为172.16.249.98&#xff0c;解析域名为stu07.com一、主DNS服务器搭建1、 检查系统是否安装bind包&#xff0c;否则用yum安装2、安装好bind包后&#xff0c;编辑主…

ADT Running Android Lint has encountered a problem

解决办法&#xff1a; Window--->Preferences----->Android--------> LInt Error Checking----->when saving files, check for errors 。去掉勾选 如果此方法还行不通&#xff0c;可能是你系统是64位的&#xff0c;但是安装的却是32位的eclipse&#xff01; 重装个…

生产计划到底该怎样改进?这6点帮你节省至少60%的计划时间

生产计划贯穿了价值创造的全过程&#xff1a;从概念到投产的设计过程、从订货到送货的信息流通处理过程、从原材料到产成品的物质转换过程以及全生命周期的支持和服务过程&#xff0c;涉及每一个部门&#xff0c;每一个人。 生产计划管理就是计划调动一切资源&#xff0c;快速、…

mysql 连接数测试_mysql最大连接数试验

一、试验基础环境配置1、查看当前数据库的最大连接数mysql> show global variables like %connect%;-------------------------------------------| Variable_name | Value |-------------------------------------------| character_set_connection | utf8 || collation_co…

10个机器学习人工智能开发框架和AI库(优缺点对比表)/贪心学院

概述 通过本文我们来一起看一些用于人工智能的高质量AI库&#xff0c;它们的优点和缺点&#xff0c;以及它们的一些特点。 人工智能&#xff08;AI&#xff09;已经存在很长时间了。然而&#xff0c;由于这一领域的巨大进步&#xff0c;近年来它已成为一个流行语。人工智能曾经…

大数据时代的数据存储,非关系型数据库MongoDB(一)(转)

出处&#xff1a;http://www.cnblogs.com/mokafamily/p/4076954.html 爆炸式发展的NoSQL技术 在过去的很长一段时间中&#xff0c;关系型数据库&#xff08;Relational Database Management System&#xff09;一直是最主流的数据库解决方案&#xff0c;他运用真实世界中事物与…

在一个类型的继承体系中,成员的构造顺序

先看代码&#xff0c;写出结果 class A { public A() { PrintFields(); } public virtual void PrintFields(){} } class B:A { int x1; int y; public B…

IntelliJ IDEA+Mysql connecter/j JDBC驱动连接

在IntelliJ IDEA中用connecter/j jdbc驱动连接MYSQL 以下是解决过程&#xff0c;待整合。。。有点懒&#xff0c;有空再改 官方文档&#xff1a;https://www.cnblogs.com/cn-chy-com/p/10145690.html 创建了mysql新用户&#xff1a;https://blog.csdn.net/weixin_38091140/arti…