zoukankan      html  css  js  c++  java
  • CSS3 transform 属性(2D,3D旋转)

    一.语法

    div{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); 	/* IE 9 */
    -moz-transform:rotate(7deg); 	/* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg); 	/* Opera */
    }
    
    /* 多个属性 */
    div{ transform:rotateX(1px) rotateX(2px)}
    

    二.浏览器对照表

    Internet Explorer 10、Firefox、Opera 支持 transform 属性。

    Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

    Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

    Opera 只支持 2D 转换。

    三.属性对象表

    描述
    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 转换元素定义透视视图。
  • 相关阅读:
    遍历及线索化二叉树
    二叉树
    程序的内存布局
    C语言一些易混淆的概念
    C语言标准库函数memcpy和memmove的区别以及内存重叠问题处理
    柔性数组
    一个基于QT简单登录对话框(带验证码功能)
    Qt中的布局管理器
    Qt中的标准对话框
    一个基于QT简单登录对话框
  • 原文地址:https://www.cnblogs.com/pythonywy/p/11833032.html
Copyright © 2011-2022 走看看