【前端攻略--HTML/CSS】这是你需要的transform学习教程

transform位移形变

  • 移动
    • 效果图:
    • 具体代码如下:
    • <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .main{ /*透视点离屏幕的距离是1000像素(眼睛离屏幕的距离是1000像素)*/ transform-style: preserve-3d; perspective: 1000px; } .div1{ width: 300px; height: 300px; background: mediumpurple; margin: 0 auto; /*2D移动,translate(x,y),x代表水平的偏移距离,y代表垂直的偏移距离*/ /*transform:translate(0,300px);*/ /*3D移动,translate3d(x,y,z)*/ /*3D移动,x代表水平轴,y代表垂直抽,z代表从屏幕指向眼睛z轴*/ transform: translate3d(0,0px,-500px); } .div2{ width: 300px; height: 300px; background: skyblue; margin: 0 auto; /*2D移动,translate(x,y),x代表水平的偏移距离,y代表垂直的偏移距离*/ /*transform:translate(0,300px);*/ /*3D移动,x代表水平轴,y代表垂直抽,z代表从屏幕指向眼睛z轴*/ transform: translate3d(0,0px,0); } </style> </head> <body> <!-- transform:移动、旋转、倾斜、缩放 --> <div class="main"> <div class="div1"></div> <div class="div2"></div> </div> </body> </html>
  • 旋转
    • 效果图如下:
    • 具体代码如下:
    • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; margin: 0 auto; background: deepskyblue; transition: all 3s; /*transform旋转 2d旋转:rotate(角度),顺时针是正值,逆时针是负值 transform: rotate3d(x,y,z);x,y,z形成一个向量,以这个向量为轴进行旋转 transform: rotateX() rotateY() rotateZ();按照x,y,z轴进行旋转 * * */ /*transform: rotate(-100deg);*/ /*transform: rotateY(45deg);*/ /*transform: rotate3d(10,10,10,45deg);*/ /*旋转的原点:center center*/ /*center left right bottom top*/ /*transform-origin: center center;*/ /*transform-origin: left top;*/ transform-origin: center bottom; } .div1:hover{ transform: rotate(45deg); } </style> </head> <body> <div class="main"> <div class="div1"> </div> </div> </body> </html>
  • 缩放
    • 效果图如下:
    • 具体代码如下:
    • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; background: skyblue; margin: 0 auto; line-height: 300px; text-align: center; /*缩放*/ /*scale(2)放大的倍数*/ transform: scale(0.5); } .div2{ width: 300px; height: 300px; background: skyblue; margin: 100px auto; line-height: 300px; text-align: center; } </style> </head> <body> <div class="main"> <div class="div1"> helloworld </div> <div class="div2"> helloworld </div> </div> </body> </html>
  • 倾斜
    • 效果图如下:
    • 具体代码如下:
    • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 100px; background: skyblue; margin: 0 auto; line-height: 100px; text-align: center; font-size: 30px; /*倾斜*/ /*skew(x轴拉伸角度,y轴拉伸角度)*/ transform: skew(45deg,0); } .div1 span{ width: 300px; height: 100px; display: block; transform: skew(-45deg,0); } .div1:hover{ background: mediumpurple; } </style> </head> <body> <div class="main"> <div class="div1"> <span>helloworld</span> </div> </div> </body> </html>

总结:

  1. 移动:
    1. 2D移动,translate(x,y),x代表水平的偏移距离,y代表垂直的偏移距离
    2. 3D移动,translate3d(x,y,z),x代表水平轴,y代表垂直抽,z代表从屏幕指向眼睛z轴
  2. 旋转:transform旋转
    1. 2d旋转:rotate(角度),顺时针是正值,逆时针是负值
    2. transform: rotate3d(x,y,z);x,y,z形成一个向量,以这个向量为轴进行旋转
    3. transform: rotateX() rotateY() rotateZ();按照x,y,z轴进行旋转
  3. 缩放:
    1. scale(2)放大的倍数
  4. 倾斜:
    1. skew(x轴拉伸角度,y轴拉伸角度)
    2. transform: skew(45deg,0);

transition过渡动画

transition:过渡属性 过渡时间 过渡的速度变化 过渡的动画延迟时间;

transition语法格式:transition: property duration timing-function delay;

代码示例:transition:width 2s ease-in 500ms;

知识点一:transition-property 规定设置过渡效果的 CSS 属性的名称。

  • 语法格式:transition-property: none|all|property;
  • 注意事项:只设置这一个无效果,因为默认动画时长是0.需要配合时长最 终效果等一块设置才有效。
  • 参数说明:
    • none 没有属性会获得过渡效果。
    • all 所有属性都将获得过渡效果。
    • property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
  • 代码示例:transition-property:width,height;
  • JS中调用方法:object.style.transitionProperty="width,height";
  • 思考:transition-property:all; 与 transition-property:none; 的区别

知识点二:transition-duration 规定完成过渡效果需要多少秒或毫秒。默认值是 0不会有效果。

  • 语法格式:transition-duration:时间长度;
  • 代码示例:
    • transition-duration:5s; 这里单位一定要带上,5秒的意思。 1秒= 1000毫秒
    • transition-duration:5000ms; 这里单位是毫秒的意思。单位不可省略。
  • JS中调用方法:object.style.transitionDuration="5s"

知识点三:transition-timing-function 规定速度效果的贝塞尔曲线。

  • 语法格式:transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
  • 参数说明:
    • linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
    • ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
    • ease-in 由慢到快(等于 cubic-bezier(0.42,0,1,1))。
    • ease-out 由快到慢(等于 cubic-bezier(0,0,0.58,1))。
    • ease-in-out 由慢到快再到慢(等于 cubic-bezier(0.42,0,0.58,1))。
    • cubic-bezier(n,n,n,n) 课在函数中定义自己的值。取值范围0 至 1 之间的数值。
  • 代码示例:
    • transition-timing-function: ease-in-out;
    • transition-timing-function: cubic-bezier(0,0,1,1);
  • JS中调用方法:object.style.transitionTimingFunction="linear"
    • 关于贝塞尔曲线见专题说明文档,供大家业余学习。

知识点四:transition-timing-function 的特殊值

  • transition-timing-function :
    • 还可以有值: step-start | step-end | steps(<integer>[, [ start | end ] ]?)
  • steps函数
    • step-start:等同于 steps(1, start)
    • step-end:等同于 steps(1, end)
    • steps(<integer>[, [ start | end ] ]?):

接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,

指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。

知识点五:transition-delay 定义过渡效果何时开始,单位是秒或者毫秒。

  • 语法格式:transition-delay:多长时间后开始
  • 代码示例:
    • transition-delay:5s; 秒 1秒= 1000毫秒
    • transition-delay:500ms; 毫秒
  • JS中使用方法:object.style.transitionDelay="2s"

案例

可以为同一元素的多个属性定义过渡效果。

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分方式:

    transition-property:border-color, background-color, color;
    transition-duration:.5s, .5s, .5s;
    transition-timing-function:ease-in, ease-in, ease-in;
    transition-delay:.1s, .1s, .1s;

具体案例

1.过渡动画

效果图如下:

关键代码如下:

        /*过渡动画*/
        /*
         transition:过渡属性 过渡的时间  过渡的时候速度变化 过渡的动画的延迟时间
         * */
        transition: background 5s ease-in 5s;
        /*
         linear 线性速度
         ease 默认(先慢加快再慢)
         
         ease-in 先慢后快
         ease-out 先块后慢
         
         ease-in-out(先慢加快再慢)
         * */
        transition:transform 3s ease-in-out;
        
      }
      .main2:hover .div2{
        transform: translate(600px,0);
      }

2.加载动画

效果图如下:

关键代码如下:

    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .loading{
        width: 500px;
        height: 300px;
        margin: 100px auto;
        
      }
      .loadingItem{
        float: left;
        width: 100px ;
        height: 300px;
        padding: 20px;
      }
      .loadingItem span{
        display:inline-block;
        width:100%;
        height:100%;
        background:skyblue;
        animation: changeColor 5s infinite;
      }
      .loadingItem:nth-child(1){
        animation: loading 1s infinite;
      }
      .loadingItem:nth-child(2){
        animation: loading 1s 0.1s infinite;
      }
      .loadingItem:nth-child(3){
        animation: loading 1s 0.2s infinite;
      }
      .loadingItem:nth-child(4){
        animation: loading 1s 0.3s infinite;
      }
      .loadingItem:nth-child(5){
        animation: loading 1s 0.4s infinite;
      }
      
      @keyframes loading{
        0%{
          transform: scale(1);
          background: skyblue;
        }
        25%{
          transform: scale(1,1.8);
          background: purple;
        }
        50%{
          transform: scale(1);
          background: pink;
        }
      }
      
      @keyframes changeColor{
        0%{
          background: skyblue;
        }
        50%{
          background: salmon;
        }
        100%{
          background: skyblue;
        }
      }
</style>

3.动画

效果图如下:

关键代码如下:

<style type="text/css">
      .div1{
        width: 200px;
        height: 200px;
        background: deepskyblue;
        
        /*
         animation:动画的关键帧名字 动画时间周期 动画的速度 动画的延迟时间 动画的次数 是否保留最后一帧
         */
        /*这是综合设置*/
        animation: moveAnimation 5s linear 3 forwards;
        
        
        /*animation-name: moveAnimation;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 3s;
        animation-iteration-count: 3;
        animation-fill-mode: forwards;    */
        
        
      }
      
      
      @keyframes moveAnimation{
        0%{
          transform: translate(0,0);
        }
        25%{
          transform: translate(500px,0);
        }
        50%{
          transform: translate(500px,500px);
        }
        75%{
          transform: translate(0,500px);
        }
        100%{
          transform: translate(0,0);
        }
      }
</style>

4.垂直上下居中

效果图如下:

关键代码如下:

/*第一种方式*/
        left: 50%;
        top: 50%;
        /*借用margin-top和margin-left*/
        margin-left: -50px;
        margin-top: -50px;
        
        
        /*第二种方式*/
        /*left: calc(50% - 50px);
        top: calc(50% - 50px);*/

5.往返运动

效果图如下:

关键代码如下:

<style type="text/css">
      .div1{
        width: 100px;
        height: 100px;
        background: skyblue;
        animation: wangfan 3s infinite alternate;
        /*动画的方向,normal,alternate,alternate-reverse*/
        /*
         alternate:奇数次按照正常运行,偶数次逆着运行
         alternate-reverse:奇数次逆行,偶数次顺行
         * */
        animation-direction: alternate-reverse;
        
      }
      
      @keyframes wangfan{
        from{
          transform: translate(0,0);
        }
        to{
          transform: translate(500px,0);
        }
      }
</style>

6.表单样式

效果图如下:

关键代码如下:

<style type="text/css">
      .div1{
        width: 200px;
        height: 200px;
        background: #ccc;
        margin: 0 auto;
        transition: all 2s;
      }
      
      /*选中后面的同级元素*/
      #input1:checked ~ .div1{
        background: skyblue;
        border-radius: 20px;
        box-shadow:0 0 50px skyblue;
        animation: xuanzhuan 2s linear infinite;
      }
      
      @keyframes xuanzhuan{
        from{
          transform: rotate(0deg);
        }
        to{
          transform: rotate(360deg);
        }
      }
      
      #input2:checked ~ .div1{
        background: salmon;
        border-radius: 100px;
        box-shadow: 0 0 20px salmon,0 0 50px yellow;
      }
      .btn{
        text-align: center;
      }
      .btn label{
        display: inline-block;
        width: 200px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        border-radius: 20px;
        background: salmon;
        margin: 20px 30px;
      }
</style>
  </head>
  <body>
    <div class="btn">
      <label for="input1">男</label>
      <label for="input2">女</label>
    </div>
    
    
    <hr />
    <!--
      属性hidden可以将输入框隐藏起来
    -->
    <input type="radio" id="input1" name="sex" value="男" hidden="hidden" />
    <input type="radio" id="input2" name="sex" value="女" hidden="hidden" />
    
    <hr />
    
    <div class="div1">
      <div class="tt">
        
      </div>
    </div>
    
  </body>

7.一个魔方具体案例

效果图如下:

关键代码如下:

      .main{
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      .mofang{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
        transition: all 5s;
        transform-style: preserve-3d;
        transform: rotate3d(-1,1,0,0deg) scale3d(1,1,1);
      }
      .mofang div{
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;
        /*opacity透明度设置:完全透明是0,完全不透明是1*/
        opacity: 0.6;
        border: 1px solid #ccc;
        transition: all 5s;
        
      }
      
      .front{
        background: url(img/1.png);
        background-size:  100% 100%;
        transform: translateZ(100px);
      }
      .back{
        background: url(img/2.jpg) ;
        background-size:  100% 100%;
        /*transform: translateZ(-100px);*/
        transform: rotateY(180deg) translateZ(100px);
      }
      .left{
        background: url(img/3.jpg) ;
        background-size:  100% 100%;
        transform: rotateY(90deg) translateZ(100px);
      }
      .right{
        background: url(img/4.jpeg) ;
        background-size:  100% 100%;
        transform: rotateY(-90deg) translateZ(100px);
      }
      .top{
        background: url(img/5.jpeg) ;
        background-size:  100% 100%;
        transform: rotateX(90deg) translateZ(100px);
      }
      .bottom{
        background: url(img/6.jpg);
        background-size:  100% 100%;
        transform: rotateX(-90deg) translateZ(100px);
      }
      
      .main:hover .mofang{
        transform: rotate3d(-1,1,0,360deg) scale3d(2,2,2);
      }
      
      /*.main:hover .mofang{
        transform:scale3d(2,2,2);
      }*/
      
      /*.main:hover .top{
        transform: rotateX(90deg) translateZ(200px);
      }*/
      
      #zhengmian:checked ~ .main .mofang{
        transform: rotate3d(-1,1,0,0deg) scale3d(1,1,1);
      }
      #xuanzhuan:checked ~ .main .mofang{
        animation: xuanzhuan 2s infinite alternate;
      }
      @keyframes xuanzhuan{
        from{
          transform: rotate3d(-1,1,0,0deg) scale3d(1,1,1);
        }
        to{
          transform: rotate3d(-1,1,0,360deg) scale3d(2,2,2);
        }
      }

8.滑块开关

效果图如下:

关键代码如下:

    <style type="text/css">
      .kuaiguan{
        width: 400px;
        height: 200px;
        margin: 0 auto;
        display: block;
        border: 1px solid #ccc;
        position: relative;
      }
      .huakuai{
        width: 200px;
        height: 200px;
        display: block;
        background: pink;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        transition: all 1s;
      }
      
      .kuaiguan .before{
        display: block;
        position: absolute;
        width: 200px;
        height: 200px;
        left: 0;
        top: 0;
        font-size: 100px;
        font-weight: 700;
        line-height: 200px;
        text-align: center;
        color: #fff;
        transition: all 1s;
        
      }
      
      .kuaiguan .after{
        
        display: block;
        position: absolute;
        width: 200px;
        height: 200px;
        right: 0;
        top: 0;
        font-size: 100px;
        font-weight: 700;
        line-height: 200px;
        text-align: center;
        color: #666;
        transition: all 1s;
      }
      
      
      #toggle:checked ~ .kuaiguan .huakuai{
        transform: translate(200px,0);
        background: deepskyblue;
      }
      #toggle:checked ~ .kuaiguan .before{
        color: #666;
      }
      #toggle:checked ~ .kuaiguan .after{
        color: #fff;
      }
</style>

9.火影动画效果制作

效果图如下:

关键代码如下:

.mingren{
        width:400px;
        height: 200px;
        background: url(img/mingren.png);
        /*如果要实现游戏技能的动画,那么需要用到steps属性*/
        animation: mingren 2s infinite steps(16);
      }
      @keyframes mingren{
        from{
          background-position: 0 0;
        }
        to{
          background-position: 0px -3072px;
        }
      }
      
      .zuozhu{
        width:400px;
        height: 100px;
        background: url(img/zuozhu.png);
        animation: zuozhu 2s infinite steps(13);
        position: absolute;
      }
      
      @keyframes zuozhu{
        from{
          background-position: 0 0;
        }
        to{
          background-position: 0 -2496px;
        }
      }

10.总结

  • 动画属性
  • 可参考:https://blog.csdn.net/u013243347/article/details/79976352
  • animation: /* animation:动画的关键帧名字 动画时间周期 动画的速度 动画的延迟时间 动画的次数 是否保留最后一帧 是否往返运动 */ /*这是综合设置*/ animation: moveAnimation 5s linear 3 forwards; /*animation-name: moveAnimation; animation-duration: 5s; animation-timing-function: linear; animation-delay: 3s; animation-iteration-count: 3; animation-fill-mode: forwards;   */ /*动画的方向,normal,alternate,alternate-reverse*/ /* alternate:奇数次按照正常运行,偶数次逆着运行 alternate-reverse:奇数次逆行,偶数次顺行 * */ animation-direction: alternate-reverse; @keyframes moveAnimation{ 0%{ transform: translate(0,0); } 25%{ transform: translate(500px,0); } 50%{ transform: translate(500px,500px); } 75%{ transform: translate(0,500px); } 100%{ transform: translate(0,0); } } 游戏动画制作: .mingren{ width:400px; height: 200px; background: url(img/mingren.png); /*如果要实现游戏技能的动画,那么需要用到steps属性*/ animation: mingren 2s infinite steps(16); } @keyframes mingren{ from{ background-position: 0 0; } to{ background-position: 0px -3072px; } }

  • 垂直上下居中
  • .main{ width: 600px; height: 400px; background: cornsilk; margin: 0 auto; position: relative; } .content{ width: 100px; height: 100px; background: skyblue; position: absolute; /*第一种方式*/ /*left: 50%; top: 50%;*/ /*借用margin-top和margin-left*/ /*margin-left: -50px; margin-top: -50px;*/ /*第二种方式*/ /*left: calc(50% - 50px); top: calc(50% - 50px);*/ }

  • 表单样式
  • ------------------------- <label for="input1">男</label> <label for="input2">女</label> <hr /> <input type="radio" id="input1" name="sex" value="男" /> <input type="radio" id="input2" name="sex" value="女" /> -------------------------- ------------------------- /*选中后面的同级元素*/ #input1:checked ~ .div1 ------------------------- label 标签的for属性通过ID名字和输入框相绑定,那么点击label的标签,就像点击输入框标签一样 <!-- 属性hidden可以将输入框隐藏起来 --> <input type="radio" id="input1" name="sex" value="男" hidden="hidden" />
  • overflow:hidden有两个作用,分别说明:
  • 1、隐藏溢出
    • 当我们没有给父级元素div设置高度的时候,子级元素div的高度就会撑开父级元素div;而当我们给父级元素div加上一个高度值,那么无论子级元素div的高度是多少,最终显示的高度都是父级元素设定的值。子级元素div超出的部分就会被隐藏。这就是隐藏溢出的含义!
  • 2、清除浮动
    • 当子级元素div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了父级元素div,也就是说变成了一个立体的模型(实际是脱离了文档流,不占用文档流的空间)。此时的子级元素的宽高是多少, 对于父级元素来说都不起作用。这时候我们给父级元素这个div加上overflow:hidden这个属性的时候,其中的子级元素的浮动属性就会被清除,重新在文档流中开辟一块地方,给子级元素显示。
    • 当父级元素没有设置浮动,而子元素设置了浮动时,子元素脱离文档流,父级元素高度没法扩展,被缩成一条。在父层用overflow:hidden恢复父层高度,与内容高度自适应。

- End -

原文发布于微信公众号 - 离不开的网(Gy_dxj)

原文发表时间:2019-06-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券