CSS3动画属性:transform变形

更新日期: 2019-08-31阅读量: 1326标签: 动画

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

rotate() :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。

如:transform:rotate(30deg):

来看一个rotateY的例子:

html代码

<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我们分为以下情况:

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

缩放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

扭曲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

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-origin

他的主要作用就是让我们在进行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设置一样;下面我列出他们相对应的写法:

  • 1、top left | left top 等价于 0 0 | 0% 0%
  • 2、top | top center | center top 等价于 50% 0
  • 3、right top | top right 等价于 100% 0
  • 4、left | left center | center left 等价于 0 50% | 0% 50%
  • 5、center | center center 等价于 50% 50%(默认值)
  • 6、right | right center | center right 等价于 100% 50%
  • 7、bottom left | left bottom 等价于 0 100% | 0% 100%
  • 8、bottom | bottom center | center bottom 等价于 50% 100%
  • 9、bottom right | right bottom 等价于 100% 100%

其中 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 ; 

transform综合表如下:  
描述
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 转换元素定义透视视图。


站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

链接: https://www.fly63.com/article/detial/5610

纯CSS3实现各种表情动画

CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画

Vue.js动画笔记_vue实现动画效果

Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。

新手引导动画的4种实现方式

尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素

为何 Canvas 内元素动画总是在颤抖?

在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的

前端开发常用css动画代码

常用的CSS动画效果,在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果,这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。

css环形滚动_内容加载的环形滚动动画效果

创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可

CSS3动画transform、transition和animation的区别

CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation。transform:描述了元素的静态样式,本身不会呈现动画效果,transition样式过渡,从一种效果逐渐改变为另一种效果,animation动画 由@keyframes来描述每一帧的样式

css transition 实现滑入滑出

transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。

动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢

超酷的CSS3 loading预加载动画特效

这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!