css3--transitions-transforms-animation

原创 小小沫 随笔 干货 284阅读 2017-05-09 10:52:12 举报

css3 transition(过渡) ----transform(变换)----animation(动画)

animated infinite fadeInDown

一。transition(过渡)---平滑的改变css的值(4)

transition有下面些具体属性:

transition-property:*//指定过渡的性质,比如transition-property:background就是指background参与这个过渡

transition-duration:*//指定这个过渡的持续时间

transition-delay:*//延迟过渡时间

transition-timing-function:*//指定过渡类型,有ease(逐渐变慢)|linear(线性渐变)|ease-in(先慢后快)|ease-out(先快后慢)|ease-in-out(先慢后快再慢)|cubic-bezier

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

eg:

HTML代码:

<a href="#" class="trans">经过我</a>

CSS代码:

.trans{display:inline-block;padding:1px 8px;-webkit-transition-property:background-color;
-webkit-transition-duration:0.3s;-webkit-transition-timing-function:ease;}

.trans:hover{background-color:#486aaa;color:#fff;}

二。transform(变换)--rotate(旋转) skew(扭曲) scale(缩放) translate(移动) matrix(矩阵变形)(6)

transform:none; //表示不进行变换

rotate 旋转 transform:rotate(20deg)旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left,top,center,right,bottom或坐标值(50px 70px).

            对元素按顺时针或逆时针方向进行旋转,其值为正数时,表示按顺时针方向旋转,其值为负数时,表示按逆时针方向旋转。

skew 扭曲 transform:skew(30deg,30deg) skew(相对x轴倾斜,相对y轴倾斜)

             主要区别是,x轴的值若为正数,表示逆时针偏斜,若为负数,表示顺时针偏斜;而y轴的值跟x轴的刚好相反,正为顺,负为逆。

scale 缩放 transform:scale(2,3)横向放大2倍,纵向放大3倍。如等比放大写一个参数即可。

translate 移动 transform:translate(50px,50px);平移是一种利用x和y坐标值定位元素的方式,注意这个跟position的定位不同,它参照的位置是它本身,但position参照的是父级。

matrix 矩阵变形 基本语法transform:matrix(a,c,b,d,tx,ty);其中a,c,b,d是一个二维矩阵:

[a b

c d]

a:X轴缩放比例 b:Y轴倾斜 c:Y轴缩放比例 d:X轴倾斜

tx,ty就是基于X和Y坐标重新定位元素。其实就是translate(tx,ty)

eg:
HTML代码:

<a href="#" class="trans_effect">点击!</a>

CSS代码:

.trans_effect{display:block;line-height:100px;width:100px;background-color:#beceeb;margin:30px auto;text-align:center;
-webkit-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-o-transition:all 2s ease-in-out;-ms-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;}

.trans_effect:hover{-webkit-transform:rotate(720deg) scale(2,2);-moz-transform:rotate(720deg) scale(2,2);-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);transform:rotate(720deg) scale(2,2);}

三。animation(动画)(ndidt)(5)

animation-name:*//指定动画名称

animation-duration:*//指定动画持续时间

animation-iteration-count:*//指定动画执行次数(infinite无限)

animation-direction:*//

animation-timing-function:*//指定动画类型

keyframes(关键帧)

eg:

HTML代码:

<div class="anim_box test_box"></div>

CSS代码:

@-webkit-keyframes resize {0%{padding:0;}
50%{padding:0 20px;background-color:rgba(190,206,235,0.2);}100%{padding:0 100px;background-color:rgba(190,206,235,0.9);}}

.anim_box:hover{
-webkit-animation-name:resize;-webkit-animation-duration:1.5s;-webkit-animation-iteration-count:4;
-webkit-animation-direction:alternate;-webkit-animation-timing-function:ease-in-out;}

为什么设计师的眼里饱含着泪水,因为对页面效果爱的深沉。

css3-transform

transform中使用多个transform-function时需使用空格隔开。

前置属性:

1.transform-origin:用以指定元素变形的中心点。默认中心点就是元素的正中心,即XYZ轴的50% 50% 0处。可以通过该属性改变元素在XYZ轴的中心点,

             正值表示正向位移,负值表示负向位移。(XYZ轴的正向分别是往右,往下,靠近用户眼睛。反之为反向)

             表示2维的x-offset/y-offset可以设px值也可设百分比,还可设top/right/bottom/left/center等关键字。表示3维的z-offset只能                   设px值,不能设百分比和关键字。

             注意:css3变形中旋转rotate,缩放scale,倾斜skew都可通过transform-origin属性重置元素的原点,但位移translate()始终以元素中心点进行位移。

2.transform-style:(3个)这个属性只有两个值flat和preserve-3d。用以指定舞台为2D或3D,默认值flat表示2D舞台。preserve-3d表示3D舞台。

             注意:在变形元素自身上指定该属性是没用的,它用于指定舞台,故要在变性元素的父元素上设置该属性。设定后,所有子元素共享                  该舞台。

eg:

<style>
.div1{float:left;background-color:red;transform:perspective(200px) rotateY(45deg);}
.div1 img{transform:translateZ(16px)}
.p3d{transform-style:preserve-3d;}
</style>

<div class="div1"><img src="1.jpg"/></div>
<div class="div1 p3d"><img src="1.jpg"/></div>

另:若同时设了transform-style:preserve-3d;和overflow:hidden; ,3d效果将失效,等同于transform-style:flat;。若你发现3D效果没用像预想的那样出现,可以检查一下(包括祖先元素)是否有overflow:hidden;,该属性将flatten everything...

3.perspective:指定3d的视距。默认值是none表示无3D效果,即2D扁平化。perspective只能设px值,不能是百分比。值越小表示用户眼睛距离屏幕越近,
相当于创建一个较大的3D舞台。反之,值越大表示用户眼睛距离屏幕越远,相当于创建一个较小的3D舞台。

eg:

<style>
.x{transform:perspective(200px) rotateX(60deg);}
.y{transform:perspective(200px) rotateY(60deg);}
.z{transform:perspective(200px) rotateZ(60deg);}
</style>

<img class="x" src="1.jpg"/>
<img class="y" src="1.jpg"/>
<img class="z" src="1.jpg"/>

eg:

<style>
.divsp{display:inline-block;border:1px blue dashed;margin-left:30px;perspective:100px;}
.z1{transform:translateZ(-75px);}
.z2{transform:translateZ(0px);}
.z3{transform:translateZ(25px);}
.z4{transform:translateZ(101px);}
</style>

<div class="divsp"><img class="z1" src="1.jpg"/></div>
<div class="divsp"><img class="z2" src="1.jpg"/></div>
<div class="divsp"><img class="z3" src="1.jpg"/></div>
<div class="divsp"><img class="z4" src="1.jpg"/></div>

注意:前一种方式是perspective()函数,后一种方式是perspective属性。两种指定方式是有区别的:

a.前者perspective()函数指定只针对当前变形元素,需要和transform其他函数一起使用,仅表示当前变形元素的视距。

b.后者perspective属性指定用于3D舞台,即3D舞台的视距,里面的子元素共享这个视距。

4.perspective-origin:设置视距的基点。

5.backface-visibility:用于是否可以看见3D舞台背面,默认值visible表示背面可见,可以设成hidden让背面不可见。通常当旋转时,若不希望背面显
示出来,该属性就很有用,设成hidden即可。

以上5个前置属性,多用于3D场合,因此常见的3D的HTML结构如下:

<舞台> //为舞台加上perspective视距
<容器> //为容器加上preserve-3d,使容器内元素共享同一个3D渲染环境
<元素> //为元素加上transform效果
</容器>
</舞台>

2D变形:

1.translate位移 用于2D的有:translate,translateX,translateY

              正数表示XY轴正向位移,负数为反向位移。设单值表示只X轴位移,Y轴坐标不变。

2.scale缩放 用于2D的有:scale,scaleX,scaleY

            scale缩放,同样可设单值和双值。单值时表示X轴和Y轴等值缩放。默认值为1,要缩小请设0.01-0.99之间的值,要放大请设超过1的值。例缩小一倍可以transform:scale(.5);,放大一倍可以transform:scale(2);
            scale还能设负数,负数会先将元素反转再缩放。

3.rotate旋转 用于2D的有:rotate
只能设单值。正数表示顺时针旋转,负数表示逆时针旋转。如transform:rotate(30deg);(注意和上面不同,在2D层面上没有rotateX/rotateY,他俩和rotateZ都是3D旋转)

4.skew扭曲 用于2D的有:skew,skewX,skewY

         可设单值和双值。单值时表示只X轴扭曲,Y轴不变。考虑到可读性,不推荐用单值,应用transform:skewX(30deg).

3D变形:

1.translate3d:用于3D的有:translate3d,translateZ

          translate3d(tx,ty,tz),其中tz的Z轴长度只能为px值,不能为百分比值。translateZ等价于translate3d(0,0,tz).Z轴的值越大表示离眼睛越近,元素就越大,但当值大于perspective视距时元素将消失。

2.scale3d: 用于3D的有:scale3d,scaleZ

        scale3d(sx,sy,sz),其中sz为z轴的缩放比例,取值同sx,sy一样,在0.01--0,99时元素缩小,1时大小不变,大于1时元素变大。

        scaleZ等价于scale(1,1,sz).需注意的是单独使用scale3d或scaleZ不会有任何效果,需配合其他属性在3D舞台上才能出现效果,否则z轴的缩放比例根本无法定义。

3.rotate3d 用于3D的有:rotate3d,rotateX,rotateY,rotateZ

        rotate3d(x,y,z,a)这里多了一个参数a(读音是阿尔法)表示3D舞台上旋转的角度,而xyz的取值为0--1为各轴的旋转矢量值。
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复