Transform字面上就是变形,改变的意思。在css3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
transform : none | <transform-function> [ <transform-function> ]*
也就是:transform: rotate | scale | skew | translate |matrix;
none:表示不进么变换;
<transform-function>表示一个或多个变换函数,以空格分开;
换句话说就是我们同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
属性 | 描述 | CSS |
---|---|---|
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
perspective | 规定 3D 元素的透视效果。 | 3 |
perspective-origin | 规定 3D 元素的底部位置。 | 3 |
backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
rotate() :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
如:transform:rotate(30deg):
来看一个rotateY的例子:
<div class="parent">
<div class="children"></div>
</div>
CSS代码:
.parent{
width:600px;
height:200px;
background:#000;
padding:100px 0;
margin:0 auto;
-webkit-perspective:800;
}
.children{
width:200px;
height:200px;
background: #e8eb10;
margin:0 auto;
-webkit-transform:rotateY(50deg);
}
移动translate我们分为以下情况:
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);
translateX(x)仅水平方向移动(X轴移动);
translateY(Y)仅垂直方向移动(Y轴移动),
translateZ(z): 定义 3D 转换,只是用 Z 轴的值。
具体使用方法如下:
transform:translate(100px,20px):
transform:translateX(100px):(基点为元素心点)
transform:translateY(20px):(基点为元素心点)
缩放scale和移动translate是极其相似,他也具有以下情况:
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);
scaleX(x)元素仅水平方向缩放(X轴缩放);
scaleY(y)元素仅垂直方向缩放(Y轴缩放),
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。
下面我们具体来看看这三种情况具体使用方法:
transform:scale(2,1.5):
transform:scaleX(2):
transform:scaleY(2):
扭曲skew和translate、scale一样同样具有三种情况:
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);
skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);
skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形),
具体使用如下:
transform:skew(30deg,10deg)
skewX() :按给定的角度沿X轴指定一个skew transformation(斜切变换)。
skewX是使元素以其中心为基点,并在水平方向(X轴)进行扭曲变行,同样可以通过transform-origin来改变元素的基点。
如:transform:skewX(30deg)
skewY() :按给定的角度沿Y轴指定一个skew transformation(斜切变换)。
skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向(Y轴)扭曲变形。
同样我们可以通过transform-origin来改变元素的基点。
如:transform:skewY(10deg)
matrix(<number>, <number>, <number>, <number>, <number>, <number>) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果有感兴趣的朋友可以去了解更深层次的martix使用方法,这里就不多说了。
他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,因为我们元素默认基点就是其中心位置,换句话说我们没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin来对元素进行基点位置改变,使元素基点不在是中心位置,以达到你需要的基点位置。下面我们主要来看看其使用规则:
transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom,这个看上去有点像我们background-position设置一样;下面我列出他们相对应的写法:
其中 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;如果只取一个值,表示垂直方向值不变,我们分别来看看以下几个实例
(2)transform-origin:right
(3)transform-origin(25%,75%)
更多的改变中心基点办法,大家可以在本地多测试一下,多体会一下,这里还要提醒大家一点的是,transform-origin并不是transform中的属性值,他具有自己的语法,前面我也说过了,说简单一点就是类似于我们的background-position的用法,但又有其不一样,因为我们background-position不需要区别浏览器内核不同的写法,但transform-origin跟其他的css3属性一样,我们需要在不同的浏览内核中加上相应的前缀,下面列出各种浏览器内核下的语法规则:
-moz-transform-origin: x y; //Mozilla内核浏览器:firefox3.5+
-webkit-transform-origin: x y; //Webkit内核浏览器:Safari and Chrome
-o-transform-origin: x y ;//Opera
-ms-transform-origin: x y; //IE9
transform-origin: x y ;//W3C标准
transform在不同浏览器内核下的书写规则
//Mozilla内核浏览器:firefox3.5+
-moz-transform: rotate | scale | skew | translate ;
//Webkit内核浏览器:Safari and Chrome
-webkit-transform: rotate | scale | skew | translate ;
//Opera
-o-transform: rotate | scale | skew | translate ;
//IE9
-ms-transform: rotate | scale | skew | translate ;
//W3C标准
transform: rotate | scale | skew | translate ;
值 | 描述 |
---|---|
none | 定义不进行转换。 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate(x,y) | 定义 2D 转换。 |
translate3d(x,y,z) | 定义 3D 转换。 |
translateX(x) | 定义转换,只是用 X 轴的值。 |
translateY(y) | 定义转换,只是用 Y 轴的值。 |
scale(x,y) | 定义 2D 缩放转换。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
perspective(n) | 为 3D 转换元素定义透视视图。 |
小伙伴们在写CSS3动画时,会发现在手机上很多时候会感到卡顿,然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决,但是为什么开启GPU加速就能让动画顺滑呢?
通过css3我们可以创建动画,它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的。
CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。
基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点?这篇文章将会逐点讲解基于JavaScript的DOM动画库,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的动画库高效的。
loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就完了。gif图也可以,但是加载时间比较长。CSS的animation可以做出大多数的loading
一个元素不设置高度时,height的默认值是 auto,浏览器会自动计算出实际的高度。那么如何为一个height:auto的元素添加 CSS3动画呢?可以通过JS 获取精确的 height 值,或者使用max-height 代替 height。
主要讲的是怎样制作流畅动画,特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点;接着会着重介绍用css3制作动画的注意事项,包括:用canvas、css3、jquery制作动画;css3在移动端卡顿问题;动画过程有闪烁问题(一般出现在动画开始)
CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation。transform:描述了元素的静态样式,本身不会呈现动画效果,transition样式过渡,从一种效果逐渐改变为另一种效果,animation动画 由@keyframes来描述每一帧的样式
CSS3之前,在网页上要做动画,一般使用javascript来实现,用timer定时执行一些操作来实现动画效果。自有了CSS3之后,在网页上做动画变得更简单了。相对于使用javascript的实现方式,用CSS3实现的动画效果更流畅,实现起来也更简单。
在CSS3中引入了全新的动画语法,它能够帮助你在设计中实现许多有趣的事情。通常构建炫酷的动画是非常复杂和费时的,而使用动画库和生成器则可以帮助你完美处理这一切
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!