关于transform的2D
在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的更多相关文章
- transform的2D部分,嗯…就这个标题了。
上一次写了transition的内容,这次就写拼写很类似的另外一个属性transform好了……我英语差这件事就不要吐槽了,下面是正文,真的: transition是过渡,transform是变换. ...
- transform做2d和3d变形(css动画一)
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 有段时间我是没理清transform.translate.transition和animation之间的关 ...
- CSS3 Transform变形(2D转换)
Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...
- css3的transform ,2D变换
transformtransform的中文翻译就是变换,改变,改观,转换的意思 在css中的主要作用就是对一个div或元素进行样式的改变. 他的属性(变换方式)有:平移,旋转,缩放,扭曲transla ...
- CSS3 transform 属性(2D,3D旋转)
一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...
- transform的2D和3D变换
transform取值 none:默认值,即是无转换 matrix(,,,,,): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f] ...
- transform CSS3 2D知识点汇总
transform转换属性的5个值: 1. translate(x值,y值) 移动效果. 2.rotate(45deg) 旋转效果. 3.scale(x轴倍数,y轴倍数) 缩放效果. 4.ske ...
- CSS 3学习——transform 2D转换
首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...
- z-index和transform
z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上.事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读.因为阅读完了,你会有所收获的. ...
随机推荐
- Fragment实现底部Tab,切换可保存状态
activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android& ...
- UIViewController的生命周期(图解)
当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序1. alloc 创建对象,分配空间2.init (initWithNibName ...
- 使用UISegementControl实现简易汤姆猫程序
// // TomViewController.m #import "TomViewController.h" #import <AVFoundation/AVFoundat ...
- 2015版Force Touch Mac Book激活三个手指拖动窗口
新买的2015版的Mac Book Pro,一切都好,就是原来一直很的很习惯的三个手指拖动窗口的手势,突然找不到地方设置了,很是让我失望了一把,在想苹果怎么会把这么有用的手势去掉了呢.还好有万能的Go ...
- Access中的SELECT @@IDENTITY
在Access数据库中存在select @@identity吗?答案是肯定的.但是Access一次只能执行一条SQL,多条SQL需要多次执行,这是限制.在SQL Server中,可以一次执行多条SQL ...
- 验证码 Demo
//设置响应头 response.setCharacterEncoding("image/jpeg"); int width=160; int height=40; Buffere ...
- POJ 1151 - Atlantis 线段树+扫描线..
离散化: 将所有的x轴坐标存在一个数组里..排序.当进入一条线段时..通过二分的方式确定其左右点对应的离散值... 扫描线..可以看成一根平行于x轴的直线..至y=0开始往上扫..直到扫出最后一条平行 ...
- [Mugeda HTML5技术教程之10]发布内容
动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...
- 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 ...
- Python Udp Socket
socket(套接字),传输层通信的端点,由IP和端口号组成(IP,Port),可以通过socket精确地找到服务器上的进程并与之通信 python2.6实现,基于AF_INET(网络套接字) 类型S ...