在transform的学习中,自己总结了一点经验。

  我们知道transform有2D和3D的两大类变换,这里分享下关于2D的属性简单示例;

一、2D变换:  (x为水平,y为垂直)

1、skew(斜拉)

  • 它的值是以角度表示,单位deg;以原点为基准,围绕 X 轴和 Y 轴按照一定的角度倾斜;
  • 可能会改变元素的形状;
  • 斜拉可以写成skew(x轴的夹角,y轴的夹角),或者skewX(xdeg),skewY(ydeg)。

A.示例图:(注!本例中的基准点是左上角,只为方便对比查看)

2、scale(缩放)

  • 根据给定的宽度(X 轴)和高度(Y 轴);
  • scale(x) 或者 scale(x,y), 一个参数时,第二个参数默认与第一个值相等;

  • 取值0~1;
  • 还可以是scaleX(x)和scaleY(y);

B.示例图:

3、rotate(旋转) 

  • 根据原点,将元素按照顺时针旋转给定的角度
  • 允许负值,元素将逆时针旋转

C.示例图:

4、translate(位移)

  • 将元素从其当前位置移动
  • 移动到 x 坐标和 y 坐标位置参数
  • 取值数值、百分比,也可以是负值
  • translateX(x),translateY(y)

D.示例图:

对于transform的2D简单介绍就是这样了。下次,我们看看2D里更高阶的matrix()矩阵变换。

 

关于transform的2D的更多相关文章

  1. transform的2D部分,嗯…就这个标题了。

    上一次写了transition的内容,这次就写拼写很类似的另外一个属性transform好了……我英语差这件事就不要吐槽了,下面是正文,真的: transition是过渡,transform是变换. ...

  2. transform做2d和3d变形(css动画一)

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 有段时间我是没理清transform.translate.transition和animation之间的关 ...

  3. CSS3 Transform变形(2D转换)

    Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...

  4. css3的transform ,2D变换

    transformtransform的中文翻译就是变换,改变,改观,转换的意思 在css中的主要作用就是对一个div或元素进行样式的改变. 他的属性(变换方式)有:平移,旋转,缩放,扭曲transla ...

  5. CSS3 transform 属性(2D,3D旋转)

    一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

  6. transform的2D和3D变换

    transform取值 none:默认值,即是无转换 matrix(,,,,,): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f] ...

  7. transform CSS3 2D知识点汇总

    transform转换属性的5个值: 1. translate(x值,y值)  移动效果. 2.rotate(45deg)  旋转效果. 3.scale(x轴倍数,y轴倍数)  缩放效果. 4.ske ...

  8. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  9. z-index和transform

    z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上.事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读.因为阅读完了,你会有所收获的. ...

随机推荐

  1. Fragment实现底部Tab,切换可保存状态

    activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android& ...

  2. UIViewController的生命周期(图解)

    当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序1. alloc                             创建对象,分配空间2.init (initWithNibName ...

  3. 使用UISegementControl实现简易汤姆猫程序

    // // TomViewController.m #import "TomViewController.h" #import <AVFoundation/AVFoundat ...

  4. 2015版Force Touch Mac Book激活三个手指拖动窗口

    新买的2015版的Mac Book Pro,一切都好,就是原来一直很的很习惯的三个手指拖动窗口的手势,突然找不到地方设置了,很是让我失望了一把,在想苹果怎么会把这么有用的手势去掉了呢.还好有万能的Go ...

  5. Access中的SELECT @@IDENTITY

    在Access数据库中存在select @@identity吗?答案是肯定的.但是Access一次只能执行一条SQL,多条SQL需要多次执行,这是限制.在SQL Server中,可以一次执行多条SQL ...

  6. 验证码 Demo

    //设置响应头 response.setCharacterEncoding("image/jpeg"); int width=160; int height=40; Buffere ...

  7. POJ 1151 - Atlantis 线段树+扫描线..

    离散化: 将所有的x轴坐标存在一个数组里..排序.当进入一条线段时..通过二分的方式确定其左右点对应的离散值... 扫描线..可以看成一根平行于x轴的直线..至y=0开始往上扫..直到扫出最后一条平行 ...

  8. [Mugeda HTML5技术教程之10]发布内容

    动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...

  9. Holes in the text Add problem to Todo list Problem code: HOLES

    import sys def count_holes(letter): hole_2 = ['A', 'D', 'O', 'P', 'Q', 'R'] if letter == 'B': return ...

  10. Python Udp Socket

    socket(套接字),传输层通信的端点,由IP和端口号组成(IP,Port),可以通过socket精确地找到服务器上的进程并与之通信 python2.6实现,基于AF_INET(网络套接字) 类型S ...