欢迎光临
我的个人博客网站

WEB前端第十六课——转换及过渡

1.transform 2D转换

  transform的属性通过函数进行定义,2D函数包括:translate()、scale()、rotate()、skew() 

  书写格式:transform: 函数名(X,Y)

  可以同时定义多个函数,函数之间通过“空格”隔开

  transform-origin 用于设置转换元素的基点位置(包括Z轴)

2.translate(Xpx,Ypx) 转换,通过设定参数,从当前元素位置沿着X轴和Y轴移动,允许一个值(X轴移动)

            参数允许负值,默认左上角为(0,0)坐标,X为负值向左移动,Y为负值向上移动

<html> <head>     <meta charset="utf-8">     <title>CSStransform</title>     <style>         .trans{             width: 200px;             height: 400px;             background-color: orangered;             margin: 100px auto;         }         .trans:hover{             transform: translate(5px,-5px);             box-shadow: 3px 3px 5px 2px #9f9f9f;         }     </style> </head> <body> <div class="trans"></div> </body> </html> 

3.rotate(deg) 旋转,元素顺时针旋转设定的角度,参数为负值时,元素将逆时针旋转

       参数值只有一个,单位为 deg

<html> <head>     <meta charset="utf-8">     <title>CSS_transform</title>     <style>         .trans{             width: 200px;             height: 400px;             background-color: orangered;             margin: 100px auto;         }         .trans:hover{             box-shadow: 3px 3px 5px 2px #9f9f9f;             transform: rotate(60deg) translate(5px,-5px);         }     </style> </head> <body> <div class="trans"></div> </body> </html> 

4.scale(m,n)缩放,通过设置参数值将原始尺寸缩放m/n倍,m值代表宽,n值代表高,允许一个值

          默认值为1,0~1表示缩小,大于1表示放大

        .trans:hover{             box-shadow: 3px 3px 5px 2px #9f9f9f;             transform: rotate(60deg) translate(5px,-5px) scale(0.5);         } 

5.skew(Xdeg,Ydeg)元素的倾斜角度,沿水平(X轴)和垂直(Y轴)翻转元素

          允许一个值,表示水平轴的角度

        .trans:hover{             /*transform: rotate(60deg) translate(5px,-5px) scale(1.2,0.5);*/             box-shadow: 3px 3px 5px 2px #9f9f9f;             transform: skew(-30deg,80deg);         } 

6.transform3D转换

  常用函数有:translate()、scale()、rot(),没有skew()函数

  在2D的基础上增加 Z轴参数设置,即 translate(X,Y,Z)、scale(X,Y,Z)、rot(X,Y,Z),也可以分别设置XYZ参数

  实现3D效果,父元素需要设置 perspective属性,定义元素被查看位置的视图效果(距离),当父元素定义了 perspective属性时,其子元素会获得透视效果,而非父元素本身

  perspective-origin(X轴值,Y轴值),用于定义3D元素的基点位置(可不设置),默认值为(50% 50%),类似perspective属性其设置对子元素生效

  perspective 既可以单独作为属性使用(书写格式 perspective: 300px),也可以作为 transform的属性函数使用(书写格式 transform: perspective(300px)

7.translate3d(x,y,z) 3D效果

<html> <head>     <meta charset="utf-8">     <title>CSS_transform</title>     <style>         .trans{             width: 500px;             height: 500px;             margin: 100px auto;             background-color: #787772;             perspective: 300px;         }         .son{             width: 500px;             height: 500px;             margin: 100px auto;             background-color: #ef4222;             transition: all 8s;         }         .son:hover{             transform: translate3d(200px,-200px,-800px);         }     </style> </head> <body> <div class="trans">     <div class="son"></div> </div> </body> </html> 

8.scale3d(x,y,z) 3D效果

<html> <head>     <meta charset="utf-8">     <title>CSS_transform</title>     <style>         .trans{             width: 500px;             height: 500px;             margin: 100px auto;             background-color: #787772;             perspective: 500px;         }         .son{             width: 500px;             height: 500px;             margin: 100px auto;             background-color: #ef4222;             transition: all 5s;             transform: scale(0.2)         }         .son:hover{             transform:scale3d(0.5,0.9,1.7);   /*Z轴转换效果不明显*/         }     </style> </head> <body> <div class="trans">     <div class="son"></div> </div> </body> </html> 

9.rotate3d(x,y,z) 3D效果

<html> <head>     <meta charset="utf-8">     <title>CSS_transform</title>     <style>         .trans{             width: 500px;             height: 500px;             margin: 100px auto;             background-color: #787772;             perspective: 500px;         }         .son{             width: 500px;             height: 200px;             transition: all 5s;             background: linear-gradient(45deg,yellowgreen,#ef4222);         }         .son:hover{             transform:scale3d(0.5,2,5) rotatez(180deg) ;         }     </style> </head> <body> <div class="trans">     <div class="son"></div> </div> </body> </html> 

10.transition过渡,通过该属性使元素从一种样式逐渐变为另一种样式的效果

  过渡属性包括:

  transition-property(需要应用过渡的CSS属性名称)、transition-duration(过渡效果持续的时间,默认0s)、transition-timing-function(过渡效果的时间曲线)、transition-delay(过渡效果何时开始,默认0s)

  transition-property属性值:none(无)、all(全部)、property name(具体名称),可同时过渡多个属性,属性之间使用“逗号”隔开

  transition-timing-function属性值:

    linear,规定开始至结束以相同速度的过渡效果(匀速)

    ease,默认值,规定慢速开始、然后变快、再慢速结束的过渡效果(先快后慢)

    ease-in,规定以慢速开始的过渡效果(加速)

    ease-out,规定以慢速结束的过渡效果(减速)

    ease-in-out,规定以慢速开始和结束的过渡效果(先加速后减速)

    cubic-bezier(n,n,n,n),自定义过渡效果,n为0~1之间的数值

  可设置过渡的属性:

    颜色属性

    取值为数值的属性

    转换属性

    渐变属性

    阴影属性

<html> <head>     <meta charset="utf-8">     <title>CSS_transform</title>     <style>         .trans{             width: 500px;             height: 200px;             margin: 100px auto;             background-color: yellowgreen;             transition: all 5s linear 1s;         }         .trans:hover{             background-color: #ef4222;         }     </style> </head> <body>     <div class="trans"></div> </body> </html> 

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端第十六课——转换及过渡
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏