ScaleYcss3(scale=3)

css3中2d变形分别可以操作元素的哪些效果

translate()：用来移动元素，可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。

scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。

rotate()：用来旋转元素。

skew()：用来让元素倾斜。在此基础上有两个扩展函数：skewX()和skewY()。

matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

CSS3 动画

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。

CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ；

transform 可以用来设置元素的形状改变，主要有以下几种变形： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵变形），语法如下：

none 表示不做变换； transform-function 表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在 () 里面，用 空格 分开，例如：

所有的变形都是基于基点，基点默认为元素的中心点。用法： transform-origin: (x, y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。

用法： rotate(angle) ；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：

它有三种用法： scale(number[, number]) 、 scaleX(number) 和 scaleY(number) ；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。

移动也分三种情况： translate(translation-value[, translation-value]) 、 translateX(translation-value) 和 translateY(translation-value) ；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位： px 、 rem 等;

扭曲同样也有三种情况， skew(angle[, angle]) 、 skewX(angle) 和 skewY(angle) ；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。

矩阵变形相对来说非常复杂，涉及到数学中的矩阵计算，有兴趣的同学可以研究一下： CSS3 Transform Matrix

transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：

它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：

它是用来设置转换过程的持续时间，单位是 s 或者 ms ，默认值为0；

它是来设置过渡效果的速率，它有6种形式的速率：

它是来设置过渡动画开始执行的时间，单位是 s 或者 ms ，默认值为0；

它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 的简写：

animation 比较类似于 flash 中的 逐帧动画 ，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。

它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开：

它是用来设置动画的持续时间，单位为 s ，默认值为 0 ：

和 transition-timing-function 类似：

它是来设置动画的开始时间，单位是 s 或者 ms ，默认值为0：

它是来设置动画循环的次数，默认为 1 ， infinite 为无限次数的循环：

它是来设置动画播放的方向，默认值为 normal 表示向前播放， alternate 代表动画播放在第偶数次向前播放，第奇数次向反方向播放：

它主要是来控制动画的播放状态： running 代表播放，而 paused 代表停止播放， running 为默认值：

它是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写：

关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。 transform 我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变； transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ； transition 是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。

12.CSS3的Transform详解

==transform==字面上就是变形，改变的意思。在css3中transform主要包括以下几种： 旋转rotate 、 扭曲skew 、 缩放scale 和 移动translate 以及 矩阵变形matrix 。

none:表示不进么变换；表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

1.1 translate(x,y):单位可以是px

1.2单位也可以是百分比，参照物是元素本身

1.3 参数可以是(x,y),x,y轴都位移

1.4 参数(x),设置x轴上得位移

translate([ x,y ]) ：通过矢量[tx, ty]指定一个2D translation，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px):

[图片上传失败...(image-154e3b-1620550857918)]

2、translateX() ： 通过给定一个X方向上的数目指定一个translate。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。如：transform:translateX(100px):

[图片上传失败...(image-80f009-1620550857918)]

3、translateY() ：通过给定Y方向的数目指定一个translate。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。如：transform:translateY(20px):

[图片上传失败...(image-2ffdd9-1620550857918)]

[图片上传失败...(image-af90fa-1620550857918)]

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

[图片上传失败...(image-a2befa-1620550857918)]

skew( [, ]) ：X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg):

[图片上传失败...(image-c4b307-1620550857918)]

skewX() ： 按给定的角度沿X轴指定一个skew transformation（斜切变换）。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。如：transform:skewX(30deg)

[图片上传失败...(image-e96057-1620550857918)]

skewY() ： 按给定的角度沿Y轴指定一个skew transformation（斜切变换）。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如：transform:skewY（10deg）

[图片上传失败...(image-84cb03-1620550857918)]

scale([x, y])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，== 如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。== 如：transform:scale(2,1.5):

[图片上传失败...(image-fd2209-1620550857918)]

scaleX() ： 使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。如：transform:scaleX(2):

[图片上传失败...(image-be2d37-1620550857918)]

scaleY() ： 使用 [1,sy] 缩放矢量执行缩放操作，sy为所需参数。scaleY表示元素只在Y轴（垂直方向）缩放元素，其基点同样是在元素中心位置，可以通过transform-origin来改变元素的基点。如transform:scaleY(2):

[图片上传失败...(image-6c61d2-1620550857918)]

[图片上传失败...(image-374ac1-1620550857918)]

matrix(, , , , , ) ： 以一个含六值的(a,b,c,d,e,f) 变换矩阵 的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果有感兴趣的朋友可以去了解更深层次的martix使用方法，这里就不多说了。

transfrom-origin转换原点

1.一个值：设置x轴原点

2.两个值：设置x轴和y轴的原点

3.默认原点在中心：center,center

4.属性值可以使百分比

5.属性值也可以是x轴为left,center,right,y轴为top,center,bottom

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%;如果只取一个值，表示垂直方向值不变，我们分别来看看以下几个实例

(1)transform-origin:(left,top):

[图片上传失败...(image-ed7125-1620550857918)]

(2)transform-origin:right

[图片上传失败...(image-6bf39b-1620550857918)]

(3)transform-origin(25%,75%)

[图片上传失败...(image-cfef52-1620550857918)]

//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的书写规则，如果需要兼容各浏览器的话，以上写法都需要调用。

支持transform浏览器

[图片上传失败...(image-66003f-1620550857918)]

同样的transform在IE9下版本是无法兼容的，之所以有好多朋友说，IE用不了，搞这个做什么？个人认为，CSS3推出来了，他是一门相对前沿的技术，做为Web前端的开发者或者爱好者都有必要了解和掌握的一门新技术，如果要等到所有浏览器兼容，那我们只能对css3说NO，我用不你。因为IE老大是跟不上了，，，，纯属个人观点，不代表任何。还是那句话，感兴趣的朋友跟我一样，不去理会IE，我们继续看下去。

CSS3中如何使元素曲线运动

CSS3中使用transform属性可实现元素曲线运动。

下面介绍下transform 属性定义及其实例。

定义和用法：

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

默认值： none

继承性： no

版本： CSS3

JavaScript 语法： object.style.transform="rotate(7deg)"

语法transform: none|transform-functions;

值 ????????描述

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?轴的值。

translateZ(z) 定义?3D?转换，只是用?Z?轴的值。

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?转换元素定义透视视图。

浏览器支持：

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

实例：

实例A：

旋转?div?元素：

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg);? /*?IE?9?*/

-moz-transform:rotate(7deg);? /*?Firefox?*/

-webkit-transform:rotate(7deg);?/*?Safari?和?Chrome?*/

-o-transform:rotate(7deg);? /*?Opera?*/

}

CSS3 转换。

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

translate()?方法

通过?translate()?方法，元素从其当前位置移动，根据给定的?left（x?坐标）?和?top（y?坐标）?位置参数：

实例

div

{

transform:?translate(50px,100px);

-ms-transform:?translate(50px,100px); /*?IE?9?*/

-webkit-transform:?translate(50px,100px); /*?Safari?and?Chrome?*/

-o-transform:?translate(50px,100px); /*?Opera?*/

-moz-transform:?translate(50px,100px); /*?Firefox?*/

}

注：Internet Explorer 9 需要前缀 -ms-。

css3 scale怎么用

transform:scale(x,y)

x y代表两个轴上的缩放，同时可以使用

transform:scaleX()

transform:scaleY()

来单独对x轴 y轴进行缩放

前端（过渡动画）

css3 新增的有：过度动画阴影，圆角

transition：width（宽度产生动画）

1 在哪产生动画

2 动画消耗的时间

3 运动曲线

4 延长多长时间才开始执行动画，（不写就不执行）规定过度效果的曲线，默认是ease，多个用，（逗号）隔开，过度属性：transition

圆角： border - radius，如果不想写那么多的话就用

transition：all is ease

transition：all is linear 匀速

transition：all is ease 开始和结束 慢速 中间加速

transition ：all is ease - in . 开始的时候慢，越来越快，然后停止；

transition : all is ease - out . 开始时快，越来越慢，然后停止；

transition : al is ease-in -out .开始和结束时慢速

如果子元素超出父元素时 : overflow : hidden;

rgba(0 ,0, 0,0.5 );半透明；

line-height 行高；margin : 20px,间距20px,info信息

tansfrom 变形

1.位移 ， 2.缩放 ， 3.旋转 ， 4.斜切 ，

1.位移 transition(50px，50px) 水平和垂直；

是不会影响文档流的 ，自己动 不会影响下边的；

2.旋转 transition:rotate（30deg）沿着z 轴旋转 ；

3.缩放 transitiion ：scale(0.5,0.2) 宽度 高度；

4.斜切 transition : skew(0,45deg ) x轴不动，y轴斜切45度；水平和垂直；

margin : 50px(上边距) auto 0;

元素旋转

transfrom : rotate(45deg) 默认是沿着z轴旋转；

transfrom : perspective(800px ) rotate(45deg)

perspective 设置透视距离，经验数 800px ，比较符合人眼的透视距离；

transfrom -style ： perseve-3d ,设置盒子按3d空间显示；

变形中间点

div : nthchild{} ;第几个孩子；

transfrom-origin:left center, 设置变形的中心点 (左中)；

transfrom-origin:left top,设置变形的中心点 (左上)；

背面可见

margin : 上，右，下，左，

如果不想变的话 加过度 transfom:all 500ms ease;

800是经验值 起始角度 rotatey (0deg);

有透视效果 transfrom -style : preserve -3d;

设置盒子背面是否可见

backface - visibity : hidden; 背面不可见 （隐藏不可见）；

图片翻面时另一张图片

animation 动画

多个设置用空格隔开；

animation : moving 1s ease(运动曲线) 1s(延迟) 5(动的次数 ) alternat(是否返回)

alternate 设置是否返回；

infinite 不限次数；

动画运岁动的状态 ： 暂停 animation-play-state : paused;

动画运动的状态 ： 运行 animation-play-state : running;

forwards 动画结束最后状态；

both 都 起始和结束都设置；

@keyframes 创建关键动画时；声明一个动画，给他后面随便起一个名字；

动画一个状态到另一个状态；

隐藏 overflow : hidden;

相对定位 ：position : relative;

绝对定位 : positiion : absolute;

动画定义的关键字:

@keyframes 名字{ 起始状态 from [ left 0px]

终止状态 to [ left 0px,]}

from 开始 ，to 结束；

循环一直走 ：infinte ;

transfrom : scaley;

多帧动画

位移动画 transfrom : tanslateY(Y轴) 10px;

圆角 border - ralios : 50px;

原路返回 ： alternate;

缩放 transfrom : scale(0.5 0.5)

box-shadow : 17px(X轴) 13px（Y轴）12px(羽化) 14px(扩展) p