css3 transform(变形)笔记
Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
一、旋转rotate
rotate(<angle>) :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg)
二、移动translate
移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)
1、translate(<translation-value>[, <translation-value>]) :如transform:translate(100px,20px)
2、translateX(<translation-value>) : 如:transform:translateX(100px)
3、translateY(<translation-value>) :如:transform:translateY(20px)
三、缩放scale
缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。
1、scale(<number>[, <number>]):如:transform:scale(2,1.5)
2、scaleX(<number>) : 如:transform:scaleX(2)
3、scaleY(<number>) : 如:transform:scaleY(2)
四、扭曲skew
扭曲skew和translate、scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
1、skew(<angle> [, <angle>]) :如:transform:skew(30deg,10deg)
2、skewX(<angle>) : 如:transform:skewX(30deg)
3、skewY(<angle>) : 如:transform:skewY(10deg)
五、矩阵matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,详细解读matrix
改变元素基点transform-origin
transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。
transform-origin跟其他的css3属性一样,我们需要在不同的浏览内核中加上相应的前缀,下面列出各种浏览器内核下的语法规则:
//Mozilla内核浏览器:firefox3.5+
-moz-transform-origin: x y;
//Webkit内核浏览器:Safari and Chrome
-webkit-transform-origin: x y;
//Opera
-o-transform-origin: x y ;
//IE9
-ms-transform-origin: x y;
//W3C标准
transform-origin: x y ; 参考链接:http://www.w3cplus.com/content/css3-transform
css3 transform(变形)笔记的更多相关文章
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
- CSS3 transform变形(3D转换)
一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...
- CSS3 Transform变形(2D转换)
Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...
- css3 transform 变形属性详解
本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...
- css3 transform 变形
在css3中,用transform可以实现文字或图像的旋转.缩放.倾斜和移动,并且该元素下的所有子元素,随着父元素一样转.缩放.倾斜和移动. transform属性 transform的属性包括:ro ...
- CSS3 transform变形(2D转换)
transform 属性应用于2D 或 3D 转换.该属性允许我们对元素进行平移.旋转.缩放或倾斜. 一.translate(x,y).translateX(n).translateY(n)定义2D平 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- css3中变形与动画(一)
css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...
随机推荐
- 2D Circular Geometry Kernel ( Geometry Kernels) CGAL 4.13 -User Manual
1 Introduction The goal of the circular kernel is to offer to the user a large set of functionalitie ...
- EF动态linq的两种方式
网上收集的资源 我怕遗忘就在自己博客记录下,有些我忘记原文地址了请见谅 这个链接的动态sql方式是 where("c=>c.id==id") https://weblogs ...
- 记录JavaScript中使用keyup事件做输入验证(附event.keyCode表)
input的blur事件 $("#input-name").blur(function () { var value = $(this).val(); if (value === ...
- 【cocos2d-x 手游研发----怪物智能AI】
原创文章,转载请注明出处:http://www.cnblogs.com/zisou/p/cocos2d-xARPG4.html 谈到怪物AI,我觉得就比较话多了,首先理解一下(Artificial I ...
- 1047 行 MySQL 详细学习笔记
https://blog.csdn.net/baidu_25310663/article/details/86517610 Windows服务 -- 启动MySQL net start mys ...
- 标准 OpenStack 多region配置
首先搭建两套一样的OpenStack环境 更改前: node1: 192.168.200.100 RegionOne node2: 192.168.200.200 RegionOne 预期结果: no ...
- template(定义类的模板关键字)
template<typename T1> template<class T1> 在一般情况下二者使用方式是一样的,但有一个特例:就是当T1是一个类的时候,而这个类又有子类时候 ...
- 字符串(tjoi2016,heoi2016,bzoj4556)(sam(后缀自动机)+线段树合并+倍增+二分答案)
佳媛姐姐过生日的时候,她的小伙伴从某东上买了一个生日礼物.生日礼物放在一个神奇的箱子中.箱子外边写了 一个长为\(n\)的字符串\(s\),和\(m\)个问题.佳媛姐姐必须正确回答这\(m\)个问题, ...
- webservice gsoap 小记
参考 http://www.cs.fsu.edu/~engelen/soap.html 1. web service client application > wsdl2h -s -o MyHe ...
- Python(IO model)
day34 IO model 举例:https://blog.csdn.net/ZWE7616175/article/details/80591587 参考:http://www.cnblogs.co ...