前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【前端攻略--HTML/CSS】这是你需要的transform学习教程

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

作者头像
野原测试开发
发布2019-07-10 17:56:47
9300
发布2019-07-10 17:56:47
举报
文章被收录于专栏:技术探究

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"

案例

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

代码语言:javascript
复制
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分方式:

代码语言:javascript
复制
    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.过渡动画

效果图如下:

关键代码如下:

代码语言:javascript
复制
        /*过渡动画*/
        /*
         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.加载动画

效果图如下:

关键代码如下:

代码语言:javascript
复制
    <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.动画

效果图如下:

关键代码如下:

代码语言:javascript
复制
<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.垂直上下居中

效果图如下:

关键代码如下:

代码语言:javascript
复制
/*第一种方式*/
        left: 50%;
        top: 50%;
        /*借用margin-top和margin-left*/
        margin-left: -50px;
        margin-top: -50px;
        
        
        /*第二种方式*/
        /*left: calc(50% - 50px);
        top: calc(50% - 50px);*/

5.往返运动

效果图如下:

关键代码如下:

代码语言:javascript
复制
<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.表单样式

效果图如下:

关键代码如下:

代码语言:javascript
复制
<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.一个魔方具体案例

效果图如下:

关键代码如下:

代码语言:javascript
复制
      .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.滑块开关

效果图如下:

关键代码如下:

代码语言:javascript
复制
    <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.火影动画效果制作

效果图如下:

关键代码如下:

代码语言:javascript
复制
.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 -

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-06-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 离不开的网 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档