• CSS3 transform 属性


    CSS3 transform 属性

    语法:

    transform: none|transform-functions;

     

    描述
    none 定义不进行转换。
    matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
    translate(x,y) 定义 2D 转换。
    translate3d(x,y,z) 定义 3D 转换。
    translateX(x) 定义转换,只是用 X 轴的值。
    translateY(y) 定义转换,只是用 Y 轴的值。
    translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
    scale(x[,y]?) 定义 2D 缩放转换。
    scale3d(x,y,z) 定义 3D 缩放转换。
    scaleX(x) 通过设置 X 轴的值来定义缩放转换。
    scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
    scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
    rotate(angle) 定义 2D 旋转,在参数中规定角度。
    rotate3d(x,y,z,angle) 定义 3D 旋转。
    rotateX(angle) 定义沿着 X 轴的 3D 旋转。
    rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
    rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
    skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
    skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
    skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
    perspective(n) 为 3D 转换元素定义透视视图。

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    eg:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>例子</title> 
    <style> 
    div
    {
    width:200px;
    height:100px;
    background-color:yellow;
    /* Rotate div */
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    <div>Hello</div>
    </body>
    </html>

     

  • 相关阅读:
    使用客户端模型编程处理外部列表
    在 SharePoint2010 中使用 XML 查看器取得其他站点的内容列表
    在 SharePoint2010 中编程方式使用 BCS
    使用 zip 压缩包手动安装 Orchard
    NuGet Action Plan 更新到 1.1, 设置自动更新,获取 NuGet 包浏览器
    Percentage Closer Filtering
    Direct3D轮回:游戏特效之全屏泛光(Bloom)
    高斯模糊
    Shadow Map
    像素级动态模糊(Pixel Motion Blur)
  • 原文地址:https://www.cnblogs.com/Michelle20180227/p/8658413.html
Copyright © 2020-2023  润新知