zoukankan      html  css  js  c++  java

  • transform属性

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

    transform属性---2D位置移动

     
    1.translate(x,y)
    定义：
                基于原来的位置，沿X轴平移，长度为x，沿Y轴平移，长度为y
    语法：

                       transform：translate(x,y);                                                                                                         

    2.translateX(x)
    定义：
                基于原来的位置，沿X轴平移，长度为x
    语法：

                       transform：translateX(x);                                                                                                         

    3.translateY(y)
    定义：
                基于原来的位置,沿Y轴平移，长度为y
    语法：

                       transform：translateY(y);                                                                                                         

     

    transform属性---3D位置移动

     
     
    1.translate3d(x,y,z)
    定义：
                基于原来的位置,沿X轴平移，长度为x,沿Y轴平移，长度为y,沿Z轴平移，长度为z
    语法：

                       transform：translate3d(x,y,z);                                                                                                       

    2.translateZ(z)
    定义：
                基于原来的位置,沿Z轴平移，长度为z
    语法：

                       transform：translateZ(z);                                                                                                         

     
     

    transform属性---2D缩放转换

     
    1.scale(x,y)
    定义：
             基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数

    语法：

             transform：scale(x,y);                                                                                                             

    2.scaleX(x)
    定义：
             基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数

    语法：

             transform：scale(x);                                                                                                            

    3.scaleY(y)
    定义：
             基于原来的位置进行伸缩变换，其中y代表沿Y轴的伸缩倍数

    语法：

             transform：scale(y);                                                                                                             

     

    transform属性---3D缩放转换

     
    1.scale3d(x,y,z)
    定义：
             基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数，z代表沿Z轴的伸缩倍数

    语法：

             transform：scale3d(x,y,z);                                                                                                             

    2.scaleZ(z)
    定义：
             基于原来的位置进行伸缩变换，其中z代表沿Z轴的伸缩倍数

    语法：

             transform：scaleZ(z);                                                                                                             

    transform属性---2D旋转

     
    1.rotate(angle)
    定义：
             以图形的几何中心点为旋转中心，顺时针旋转角度为angle

    语法：

             transform：rotate(angle);                                                                                                            

    2.rotateX(x)

    定义：
             绕X轴方向旋转，顺时针旋转角度为angle

    语法：

             transform：rotateX(x);                                                                                                            

    3.rotateZ(z)
    定义：
             绕Y轴方向旋转，顺时针旋转角度为angle

    语法：

             transform：rotateZ(z);                                                                                                             

     

    transform属性---3D旋转


    1.rotate3d(x,y,z,angle)
    定义：
             同时绕X,Y,Z轴三个方向旋转，顺时针旋转角度为angle

    语法：

             transform：rotate3d(x,y,z,angle);                                                                                                             

    2.rotateZ(z)
    定义：
             绕Z轴方向旋转，顺时针旋转角度为angle

    语法：

             transform：rotateZ(z);                                                                                                             

    实例演示1

    html文件

    [html] view plain copy
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title></title>  
    6.         <link rel="stylesheet" type="text/css" href="css/index.css"/>  
    7.     </head>  
    8.     <body>  
    9.         <div id="pic">  
    10.             <img src="img/6.jpg" width="212" height="300"/>  
    11.             <p>像少年啦飞驰</p>  
    12.         </div>  
    13.     </body>  
    14. </html>  


    css文件

    [css] view plain copy
    1. *{  
    2.     margin: 0;  
    3.     padding: 0;  
    4. }  
    5. #pic{  
    6.      212px;  
    7.     height: 300px;  
    8.     margin: 100px auto;  
    9.     border: 2px solid gainsboro;  
    10.     box-shadow: 0 0 8px darkgray;  
    11.     position: relative;  
    12. }  
    13. #pic p{  
    14.      212px;  
    15.     height: 300px;  
    16.     background: whitesmoke;  
    17.     text-align: center;  
    18.     line-height: 300px;  
    19.     font-family: "微软雅黑";  
    20.     opacity: 0;  
    21.     /* 
    22.      * 定义初始状态的transform属性 
    23.      * transition定义变换属性和周期，此处为所有属性，周期2s 
    24.      */  
    25.     transform: translateY(-303px) rotate(130deg) rotateY(-270deg) rotateX(100deg) scale(0.5,0.5);  
    26.     transition: all 2s;  
    27. }  
    28. #pic:hover p{  
    29.     opacity: 1;  
    30.     /* 
    31.      * 定义变换后的状态 
    32.      */  
    33.     transform: translateY(-303px) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1,1);  
    34. }  


    实例演示2

    html文件

    [html] view plain copy
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title></title>  
    6.         <link rel="stylesheet" type="text/css" href="css/index.css"/>  
    7.     </head>  
    8.     <body>  
    9.         <div id="pic">  
    10.             <img src="img/6.jpg" width="212" height="300"/>  
    11.             <p>我的世界就如一座城池</p>  
    12.         </div>  
    13.     </body>  
    14. </html>  

    css文件

    [css] view plain copy
      1. *{  
      2.     margin: 0;  
      3.     padding: 0;  
      4. }  
      5. #pic{  
      6.      212px;  
      7.     height: 300px;  
      8.     border: 5px solid whitesmoke;  
      9.     box-shadow: 0 0 0 8px pink;  
      10.     margin: 100px auto;  
      11.     overflow:hidden;  
      12.     position: relative;  
      13.       
      14. }  
      15. #pic:hover img{  
      16.     transform: scale(1.5,1.5);  
      17.     transition: all 2s;  
      18. }  
      19. #pic p{  
      20.      212px;  
      21.     height: 20px;  
      22.     background: black;  
      23.     opacity: 0.5;  
      24.     position: absolute;  
      25.     bottom: -20px;  
      26.     color: white;  
      27.     font-family: "微软雅黑";  
      28.     font-size: 13px;  
      29.     text-align: center;  
      30.   
      31. }  
      32. #pic:hover p{  
      33.     bottom: 0px;  
      34.     transition: bottom 1s;  
      35. } 
  • 相关阅读:
    数组分组问题
    Python自然语言处理学习笔记(17)：3.1 从Web和Disk上访问文本
    求任意整数的200次平方的末两位
    Python自然语言处理学习笔记(16)：2.8 Exercises 练习
    Python自然语言处理学习笔记(15)：2.7 Further Reading 深入阅读
    Python:urllib 和urllib2之间的区别
    Python自然语言处理学习笔记(4)：1.2 进一步学习Python：将文本视作单词列表
    我中招了：解喝汽水问题
    [导入]一组与Mother相关的有趣的英语词组
    [导入]金秋湖大回忆之旅20051113
  • 原文地址：https://www.cnblogs.com/wangshengli520/p/8037597.html
Copyright © 2011-2022 走看看