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变形动画的更多相关文章

  1. 重新想，重新看——CSS3变形，过渡与动画①

    学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...

  2. 重新想，重新看——CSS3变形，过渡与动画④

    最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...

  3. 重新想，重新看——CSS3变形，过渡与动画②

    本篇文章主要用来归纳总结CSS3变形属性. CSS3变形属性大致可以分为以下三个部分: 变形控制属性 2D变形函数 3D变形函数 下面将对其一一进行分析: 1.变形控制属性 所谓的变形控制属性主要指“ ...

  4. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  5. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  6. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  7. CSS3 变形记

    CSS3 变形 CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数. transform transform属性向元素应用 2D 或 3D 转换.该属性允许我们对元素 ...

  8. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  9. css3的动画

    一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...

随机推荐

  1. Service Manager 2012

    部署Service Manager 2012遇到的2个问题 上周装了个Service Manager 2012学习,以便完善System Center整个解决方案,在部署期间遇到2个问题,花了我不少时 ...

  2. jQuery焦点图切换特效插件封装

    网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图.在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片.一般多使用在网站首页版面或频 ...

  3. ASP.NET Web API的消息处理管道: Self Host下的消息处理管道[上篇]

    ASP.NET Web API的消息处理管道: Self Host下的消息处理管道[上篇] ASP.NET Web API服务端框架核心是一个独立于具体寄宿环境的消息处理管道,它不关心请求消息来源于何 ...

  4. Fast Token Replacement in C#

    http://www.codeproject.com/Articles/298519/Fast-Token-Replacement-in-Csharp Fast Token Replacement i ...

  5. 单例模式及C++实现代码

    单例模式及C++实现代码 单例模式 单例模式,可以说设计模式中最常应用的一种模式了,据说也是面试官最喜欢的题目.但是如果没有学过设计模式的人,可能不会想到要去应用单例模式,面对单例模式适用的情况,可能 ...

  6. Study notes for Discrete Probability Distribution

    The Basics of Probability Probability measures the amount of uncertainty of an event: a fact whose o ...

  7. [置顶] Nosql笔记（一）——关系型数据库回顾

    Nosql笔记(一)——关系型数据库回顾 在平常的商业应用中,我们所使用的大多都是关系型数据库,诸如SQL  Server. MY SQL. Oracle等. 关于关系型数据库中的关键技术: 存储引擎 ...

  8. Windows Azure功能更新：弹性伸缩(autoscale)、监控报警、移动服务及网站服务商用、新的虚拟机镜像

    Windows Azure功能又更新了.此次更新包括1项重要更新和两个功能更新: 重要更新:云服务.网站支持按策略进行弹性伸缩 功能更新:两个预览版的服务(网站和移动)进入商用,虚拟机服务支持SQL ...

  9. javadataAbout stack and heap in JAVA(2)

    改章节个人在上海喝咖啡的时候突然想到的...近期就有想写几篇关于javadata的笔记,所以回家到之后就奋笔疾书的写出来发表了 The stack is much faster than the he ...

  10. JAVA的abstract修饰符 && 接口interface用法 && 抽象类和interface的差别

    abstract修饰符可以修饰类和方法. (1)abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型(见后面实例),也就是编译时类型.抽象类就相当于 ...