css3的transform(css3的transform的属性)

CSS3的transform属性的用法？

定义和用法

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

语法

transform: none|transform-functions;

旋转 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系列之transform 详解rotate

rotate

rotateX

rotateY

rotateZ

rotate3d

rotate：

旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center)

加上 transform-origin 设置旋转点。transform-origin 是根据自己而定位的，所以 0px 0px 就是左上角那个点。

rotateX：

讲这个之前呢， 先普及一个知识， 在transform里面，x y z 轴，分别是什么样子的，他跟我们平常的 x 和 y 不太一样，因为， 他是倒着的。 Z轴呢，在0 那个位置，因为他是3D的，看下面的图，转个身就知道在那里了。

接下来，看看 所谓的 Z 轴是什么

rotateX 的X呢，可以写成大写的，也可以写成小写的x， 没有影响，这个属性呢，你加上rotateX 之后，这个元素，就会以 X 轴 旋转，里面填的是角度。

这样看起来，好像不是那么直观，毕竟是2D 的图， 来给他加了3D 的效果看看，(由于设置了 transform-origin：0 0，所以并不会在元素的中间旋转，而是以 0 0 点的那条x 轴旋转)

上面两个图，第一个图是在 2d的 情况下观看的，第二个图是 3d的时候， 是不是 3d 看起来比较直观。

那么，接下来，加上Y 一起使用，rotateX(45deg) rotateY(45deg)，这两个合在一起什么意思呢， 这个元素，先按照 X轴，旋转45度，然后再按照Y轴，旋转45度，那么接下来的结果会是怎么样呢？

由于我设置的 transform-origin：center center ；定的点在中心，那么两条轴，是会成这样子的。

然后，看下，结果，是不是如我们所示？

最后，加上rotateZ

rotate3D：

设置一条主轴，然后根据这条轴旋转

这个呢，可以设置4个参数， 前三个是，x y z 最后一个是 角度deg 但是，此 x y z ，可不是上面那几个，不一样的。这三个值，设置的是矢量的方向，填什么无所谓，主要是比值很重要。举个例子 1，1，0，0deg 那么就是 1：1：0 = 100：100：0 对吧，拿这个值来图解比较好。

CSS3中的变形处理

在CSS3中，可以利用 transform 功能来实现文字或图像的旋转、缩放、倾斜和移动着4种类型的变形处理。

在CSS3中，通过 transform 属性来使用 transform 功能。

使用 rotate 方法，在参数中加入角度值，角度值后面跟表示角度单位的 deg 文字即可，旋转方向为顺时针旋转。

运行效果：

使用 scale 方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。

上面的示例使 div 元素缩小了50%。

另外，可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率。

上面的示例使 div 元素水平方向缩小了50%，垂直方向放大了一倍。

效果如图：

使用 skew 方法来实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

上面的示例使 div 元素水平方向上倾斜了30度，垂直方向上倾斜了30度。

效果如图：

另外， skew 方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。

使用 translate 方法来将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

上面的示例把 div 元素水平方向上向右移动了 50px ，垂直方向上向上移动了 50px 。

另外， translate 方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行移动，垂直方向上不移动。

示例1：

效果如图：

示例2：

效果如图：

这两个示例都是对同一个页面中同一个元素进行多重变形的示例， 而且各种变形方曲中所使用的参数也都相同，差别只是使用三种变形方法的先后顺序不一样。但，元素在两个页面上所处位置并不相同。说明 transform 参数的顺序不同，结果可能会不一样。

在使用 transform 方融进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用 transform-origin 属性，可以改变变形的基准点。

接下来，我们使用 transform-origin 属性把变形的基准点修改为第二个元素的左下角处。

运行效果：

transform-origin 属性的两个参数分别代表：基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置，其中"基准点在元素水平方向上的位置"中可以指定的值为 left 、 center 、 right ， "基准点在元素垂直方向上的位置"中可以指定的值为 top 、 center 、 bottom 。

css3中的transform、transition、translate、animation

transform：属性应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)、倾斜,扭曲(skew)，设置基点位置transform-origin:50% top;

?rotate:? ? ? ? ?是transform的值，定义2D或3D的旋转，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

? ? ? ? ? ? ? ? ? ? ?2D：rotate( angle )定义 2D 旋转，在参数中规定角度。

? ? ? ? ? ? ? ? ? ? ?3D：rotate3d( x , y , z , angle )定义 3D 旋转。

? ? ? ? ? ? ? ? ? ? ?事例：2D:transform: rotate(45deg);3D:ransform: rotate3d(0,0,0,45deg)

scale:? ? ? ? ? ?是transform的值，定义 2D 或3D缩放，表示对当前元素的缩放。

? ? ? ? ? ? ? ? ? ? 2D：scale(x,y)定义 2D 缩放，对当前元素的宽度是原始大小的x倍，高度是原始大小的y倍。

? ? ? ? ? ? ? ? ? ? 3D：scale3d( x , y , z )定义 3D 缩放，对当前元素在x轴，y轴，z轴的缩放。

? ? ? ? ? ? ? ? ? ? 事例：2D:scale: scale(2,3);3D:ransform:?scale3d(0,0,1)

translate? ：是transform的值，定义 2D 或3D转换，表示对当前元素的位移。

? ? ? ? ? ? ? ? ? ? 2D：translate( x , y )定义 2D 转换，沿着 X 和 Y 轴移动元素。

? ? ? ? ? ? ? ? ? ?3D：translate3d( x , y , z )定义 3D 转化。

? ? ? ? ? ? ? ? ? ?事例：2D:transform: translate(50px,100px);3D:ransform: translate3d(50px,100px,50px)

skew：? ? ? ?是transform的值，定义倾斜，表示对当前元素的倾斜角度。

? ? ? ? ? ? ? ? ? ?skew( x-angle , y-angle )定义 2D 倾斜，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

? ? ? ? ? ? ? ? ? ?事例：transform: skew(1deg,2deg)

transition属性：允许CSS属性值在一定的时间区间内平滑的过渡，只能设置 初始值和结束值，需要事件的触发，例如单击、获取焦点、失去焦点等

? ? ? ? ? ? ? ? ? ? ? ? transition : transition-property ? transition-duration ? transition-timing-function ? transition-delay ;

? ? ? ? ? ? ? ? ? ? ? ? transition-property :规定应用过渡的 CSS 属性的名称。

? ? ? ? ? ? ? ? ? ? ? transition-duration :定义过渡效果花费的时间。默认是 0。

? ? ? ? ? ? ? ? ? ? ? transition-timing-function :规定过渡效果的时间曲线。默认是 "ease"。

? ? ? ? ? ? ? ? ? ? ? transition-delay :规定过渡效果延迟的时间。默认是 0。

? ? ? ? ? ? ? ? ? ? ? 事例：? transition :?width 2s ease-in-out? 1s

animation属性：通过帧动画对当前元素的某些属性进行帧动画的播放，功能相似于transition，但更加的精确、可以控制到每一帧，高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前? ? ? ? ? ? ? ? ? ? ? ? ? ? 状态等，请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

? ? ? @keyframes fadeIn {

? ? ? ? ? ? ? ? ? ? 0% {opacity:0; }

? ? ? ? ? ? ? ? ? 100% {opacity:1;}

? ? ? ? ?}

? ? ? ? ? ? ? ? ? ? ? ? ? 事例：animation:fadeIn?5s infinite;（fadeIn是帧动画的名称）infinite 无限循环

@keyframes fadeIn {

0% {opacity:0;}

100% {opacity:1;}

}

@keyframes fadeout {

0% {opacity:1;}

100% {opacity:0;}

}

@keyframes pendulu?{

from {transform:rotate3d(0,0,1,0);}

5.5% {transform:rotate3d(0,0,1,-11deg);}

7% {transform:rotate3d(0,0,1,-12deg);}

16% {transform:rotate3d(0,0,1,9deg);}

17.5% {transform:rotate3d(0,0,1,10deg);}

26.5% {transform:rotate3d(0,0,1,-7deg);}

28% {transform:rotate3d(0,0,1,-8deg);}

36.5% {transform:rotate3d(0,0,1,5deg);}

38% {transform:rotate3d(0,0,1,6deg);}

46.5% {transform:rotate3d(0,0,1,-4deg);}

48% {transform:rotate3d(0,0,1,-5deg);}

57% {transform:rotate3d(0,0,1,3deg);}

58.5% {transform:rotate3d(0,0,1,4deg);}

66.5% {transform:rotate3d(0,0,1,-2deg);}

68% {transform:rotate3d(0,0,1,-3deg);}

75% {transform:rotate3d(0,0,1,1.5deg);}

76.5% {transform:rotate3d(0,0,1,2.5deg);}

82.5% {transform:rotate3d(0,0,1,-1deg);}

84% {transform:rotate3d(0,0,1,-2deg);}

90% {transform:rotate3d(0,0,1,1.5deg);}

95% {transform:rotate3d(0,0,1,-1deg);}

to {transform:rotate3d(0,0,1,0);}

}

@keyframes scale {

0% {transform:scale(0.9);}

100% {transform:scale(1);}

}

@keyframes cloud {

0% {transform:translateX(0);}

25% {transform:translateX(30%);}

50% {transform:translateX(60%);}

75% {transform:translateX(30%);}

100% {transform:translateX(0);}

}

@keyframes? fadeInDown

{

0%?{

? ? opacity:?0;

? ? filter:?alpha(opacity=0);

? ? -webkit-transform:?translate3d(0, -100%, 0);

? ? transform:?translate3d(0, -100%, 0);

}

100%?{

? ? opacity:?1;

? ? filter:?alpha(opacity=100);

? ? -webkit-transform:?none;

? ? /* transform:?none; */

}}

@-webkit-keyframes bounceIn {

0%,20%,40%,60%,80%,100% {

-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);

transition-timing-function:cubic-bezier(.215,.61,.355,1)

}

0% {

opacity:0;

filter:alpha(opacity=0);

-webkit-transform:scale3d(2,2,2);

transform:scale3d(2,2,2)

}

40% {

-webkit-transform:scale3d(.9,.9,.9);

transform:scale3d(.9,.9,.9)

}

60% {

-webkit-transform:scale3d(1.03,1.03,1.03);

transform:scale3d(1.03,1.03,1.03)

}

80% {

opacity:1;

filter:alpha(opacity=100);

-webkit-transform:scale3d(.97,.97,.97);

transform:scale3d(.97,.97,.97)

}

100% {

-webkit-transform:scale3d(1,1,1);

transform:scale3d(1,1,1)

}

}

.rotate2d {

-webkit-animation-timing-function:linear;

animation-timing-function:linear;

-webkit-animation-name:rotate2d;

animation-name:rotate2d

}

.box-bottle {

position:absolute;

left:70%;

width:pr(99);

height:pr(97);

background:url("#{$imgPath}btn-bottle.png")no-repeat;

background-size:100%;

transform-origin:35% 68%;

opacity:0;

z-index:10;

div {

position:absolute;

width:pr(18);

height:pr(35);

transform:translate3d(-150%,-20%,0)rotate3d(0,0,1,100deg);

transition:opacity .5s linear 1.5s;

}

i {

position:absolute;

width:pr(18);

height:pr(35);

background-repeat:no-repeat;

background-size:100%;

transform-origin:3000% 50%;

opacity:0;

:nth-child(1) {

transition:transform 1s ease-out 1s,opacity .2s linear .9s;

background-image:url("#{$imgPath}water1.png");

}

:nth-child(2) {

transition:transform 1.1s ease-out .9s,opacity .2s linear .8s;

background-image:url("#{$imgPath}water2.png");

}

:nth-child(3) {

transition:transform 1.2s ease-out .8s,opacity .2s linear .7s;

background-image:url("#{$imgPath}water3.png");

}

:nth-child(4) {

transition:transform 1.3s ease-out .7s,opacity .2s linear .6s;

background-image:url("#{$imgPath}water4.png");

}

:nth-child(5) {

transition:transform 1.4s ease-out .6s,opacity .2s linear .5s;

background-image:url("#{$imgPath}water5.png");

}

:nth-child(6) {

transition:transform 1.5s ease-out .5s,opacity .2s linear .4s;

background-image:url("#{$imgPath}water6.png");

}

}

.active {

opacity:1;

animation:pour 2.5s both;

div {

opacity:0;

}

i {

opacity:1;

:nth-child(1) {

transform:rotate3d(0,0,1,-25deg);

}

:nth-child(2) {

transform:rotate3d(0,0,1,-25deg)translate3d(130%,50%,0);

}

:nth-child(3) {

transform:rotate3d(0,0,1,-25deg)translate3d(260%,0,0);

}

:nth-child(4) {

transform:rotate3d(0,0,1,-25deg)translate3d(0,150%,0);

}

:nth-child(5) {

transform:rotate3d(0,0,1,-25deg)translate3d(130%,200%,0);

}

:nth-child(6) {

transform:rotate3d(0,0,1,-25deg)translate3d(260%,150%,0);

}

}

}

}

CSS3 transform 缩放

这是一个缩放的transform属性，y值可以省略，如果y值省略的话，那默认就和x值一样。

举例：

这个例子的执行效果就是，当把指针hover到这个div上的时候，那这个div会放大到原来的1.1倍大。相应的，如果把值改为0.5，hover的时候x和y就会缩小到原来的二分之一。

需要注意的是它的transfom-origin是中心点

只缩放X轴上的倍数。

3、transformY:scale(y);

只缩放Y轴上的倍数。

以上的缩放点都是中心点。