CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

transform 在2D里主要是4个方法。除了rotate 其他都是接受x y值

  • translate
  • skew
  • rotate
  • scale

Translate：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 

transform: translate(100px, 50px);

Skew：x,y有分别的方法。 x 变化就是左右的倾斜 x 变化是 上下的倾斜

skewX(10deg) skewY(80deg);

rotate：旋转，容器整体的旋转，和skew不同，形状是没变化的，是指旋转角度

transform: rotate(30deg);

Scale：缩放，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

transform: skew(30deg,20deg);

matrix() : matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

transform:matrix(,);

Transform Origin：上面那些效果都是 以容器的中心，对角线交点为中心进行的 倾斜 旋转 放大
也就是 transform-origin: 50% 50%

CSS3中的transform的更多相关文章

  1. CSS3中动画transform必须要了解的Skew变化原理

    transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...

  2. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  3. 对CSS3中的transform：Matrix（）矩阵的一些理解

    只要有CSS基础的人肯定都知道,我们可以通过transform中的translate,scale,rotate,skew这些方法来控制元素的平移,缩放,旋转,斜切,其实这些方法呢都是为了便于开发者使用 ...

  4. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  5. css3中trastion,transform,animation基本的了解

    毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...

  6. css3中的transform、transition、translate、animation（@keyframes）的区别

    一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...

  7. css3中有关transform的问题

    Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等.

  8. CSS3中的transform转换属性

    属性 transition-property 定义对象中参与过度的属性 transition-delay 延迟 transition-duration 持续时间 transition-timing-f ...

  9. 第98天：CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

随机推荐

  1. 【原创】MapReduce计数器

    MapReduce框架内置了一些计数器的支持,当然,我们也可以设置自己的计数器用来满足一些特殊的要求. 其实计数器可以用来完成很多事,关键要看你如何用,例如你想知道map输入数据的指定记录特定的信息有 ...

  2. HW5.9

    public class Solution { public static void main(String[] args) { System.out.printf("%s\t%s\t%s\ ...

  3. POJ1006 - Biorhythms（中国剩余定理）

    题目大意 略...有中文... 题解 就是解同余方程组 x≡(p-d)(mod 23) x≡(e-d)(mod 28) x≡(i-d)(mod 33) 最简单的中国剩余定理应用.... 代码: #in ...

  4. arm 交叉编译时 gcc 的 Options

    https://sourceware.org/binutils/docs/as/ARM-Options.html https://gcc.gnu.org/onlinedocs/gcc-4.5.3/gc ...

  5. The iOS Design Cheat Sheet 界面设计速参

    http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ With the release of iOS 7, app designers ...

  6. MSSQL数字时间(timestamp)转换为DATETIME

    很简单: , CAST('1970-01-01 00:00:00' AS datetime))

  7. android_自定义布局

    1.需要实现view类 2.如果需要实现自定义属性则: 1.定义资源文件attrs---->values 2. <?xml version="1.0" encoding ...

  8. [学习笔记]--Jfinal 表单提交附件

    近期.项目里面用到了Jfinal 里面的上传附件. Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单參数一起提交. 页面类似下图: ...

  9. CentOS开发环境LAMP搭建

    CentOS开发环境搭建 -------------------------------------------------------------------------准备工作---------- ...

  10. Vim 快捷键整理

    一.移动光标 1.左移h.右移l.下移j.上移k 2.向下翻页ctrl + f,向上翻页ctrl + b 3.向下翻半页ctrl + d,向上翻半页ctrl + u 4.移动到行尾$,移动到行首0(数 ...