css3变形动画
transform:变形
rotate:旋转
translate:移动
scale:缩放
skew:扭曲
一切变化都是“形变”引起的变化,所以transform就是老大,大家都围着他转
1.transform:rotate(20deg);顺时针旋转20度
2.transform:rotate(-20deg);逆时针旋转20度
3.transform:translate(20px,30px);向右移动20px,向下移动30px
4.transform:translateX(20px);向右移动20px
5.transform:translateY(30px);向下移动30px
6.transform:scale(1.25,1.3);横向放大1.25倍,纵向放大1.3倍
7.transform:scaleX(0.8);宽度缩小为原来的0.8,长度不变
8.transform:scaleY(0.8);长度缩小为原来的0.8,宽度不变
9.transform:skew(15deg,20deg);x方向扭曲15度,y轴方向扭曲20度
10.transform:skewX(15deg);水平方向扭曲变形15度
11.transform:skewY(5deg);垂直方向扭曲变形10度
css3变形动画的更多相关文章
- 重新想,重新看——CSS3变形,过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
- 重新想,重新看——CSS3变形,过渡与动画④
最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...
- 重新想,重新看——CSS3变形,过渡与动画②
本篇文章主要用来归纳总结CSS3变形属性. CSS3变形属性大致可以分为以下三个部分: 变形控制属性 2D变形函数 3D变形函数 下面将对其一一进行分析: 1.变形控制属性 所谓的变形控制属性主要指“ ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- CSS3 变形记
CSS3 变形 CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数. transform transform属性向元素应用 2D 或 3D 转换.该属性允许我们对元素 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- css3的动画
一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...
随机推荐
- [转]Metasploit的meterpreter黑客脚本列表
原文地址: 摘要: Metasploit的框架是一个令人难以置信的黑客攻击和渗透测试工具,每一个黑客称职的应该是熟悉和有能力的. 在上一篇文章中,我提供了你的 meterpreter 命令列表.这些命 ...
- TOGAF架构能力框架之架构合同、成熟度模型和架构技能框架
TOGAF架构能力框架之架构合同.成熟度模型和架构技能框架 5. 架构合同 架构合同是在开发团体和赞助者之间关于架构的交付物.质量以及适用目标的联合协议,并且通过有效的架构治理将会促使这些协议的成功施 ...
- HttpActionDescriptor,ASP.NET Web API又一个重要的描述对象
HttpActionDescriptor,ASP.NET Web API又一个重要的描述对象 通过前面对“HttpController的激活”的介绍我们已经知道了ASP.NET Web API通过Ht ...
- 更好的抽屉效果(ios)
昨天项目基本没啥事了,晚上早早的就回家了,躺在床上无聊地玩着手机(Android的),在清理系统垃圾时被一个“360手机助手”给吸引了, 其实我是被它的那个抽屉效果给吸引了,此时你也许会觉得我out了 ...
- 专为webkit内核而生的javascript库mango正式发布
专为webkit内核而生的javascript库mango正式发布 Mango(芒果) javascript库 求fork https://github.com/willian12345/mango ...
- 纯Python综合图像处理小工具(1)分通道直方图
平时工作经常需要做些图像分析,需要给图像分通道,计算各个通道的直方图分布特点,这个事儿photoshop也能做,但是用起来不方便,且需要电脑上安装有PS软件,如果用OpenCV, 更是需要在visua ...
- asp.net通用查询模块设计
asp.net通用查询模块设计 前言 自从上次狂喷了devexpress for asp.net面向互联网的app的各种不合理,好像骂的dev无处容身了,不过说实话,dev在做互联网的app时,生成的 ...
- 【deep learning学习笔记】最近读的几个ppt(四)
这几个ppt都是在微博上看到的,是百度的一个员工整理的. <Deep Belief Nets>,31页的一个ppt 1. 相关背景 还是在说deep learning好啦,如特征表示云云. ...
- centos 6.4 x64安装bugfree
第一步:下载xampp-linux-1.8.1.tar.gz [root@SVNMANAGER ~]# tar -zxvf xampp-linux-1.8.1.tar.gz -C /opt [root ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...