zoukankan      html  css  js  c++  java
  • CSS3 transform

    transform

    属性定义及使用说明

    Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

    • translate(x,y) 定义 2D 转换

    三种情况:
    translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);
    translateX(x)仅水平方向移动(X轴移动);
    translateY(Y)仅垂直方向移动(Y轴移动),

    具体使用方法如下
    transform:translate(100px,20px);
    transform:translateX(100px);
    transform:translateY(100px);

    • translate3d(x,y,z) 定义 3D 转换

        同上类似

    • scale() 定义 2D 缩放转换

    缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小

    三种情况:
    scale(x,y) 也就是X轴和Y轴同时缩放
    scaleX(x) 元素仅水平方向缩放(X轴缩放)
    scaleY(y ) 元素仅垂直方向缩放(Y轴缩放)

    使用方法:
    transform:scale(2,1.5)
    transform:scaleX(2)
    transform:scaleY(2)

    • scale3d(x,y,z) 定义 3D 缩放转换

        同上类似

    • rotate(angle) 定义 2D 旋转,在参数中规定角度

        transform:rotate(30deg) 

        正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转

    • skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换

    三种情况:
    skew(x,y) X轴和Y轴同时按一定的角度值进行扭曲变形
    skewX(x) 仅使元素在水平方向扭曲变形(X轴扭曲变形)
    skewY(y) 仅使元素在垂直方向扭曲变形(Y轴扭曲变形)


    具体使用如下:(备注我们也可以通过transform-origin来改变元素的基点位置)

    transform:skew(30deg,10deg):
    transform:skewX(30deg)
    transform:skewY(30deg)

    • matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵

        matrix(<number>, <number>, <number>, <number>, <number>, <number>) :

        以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。

        就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵

    • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵 (太复杂,不知道原理)
    • transform-origin

    transform-origin(X,Y):用来设置元素的运动的基点(参照点)。
    默认点是元素的中心点。
    其中X和Y的值可以是百分值,em,px,
    其中X也可以是字符参数值left,center,right
    1、top left | left top 等价于 0 0 | 0% 0%
    2、top | top center | center top 等价于 50% 0
    3、right top | top right 等价于 100% 0
    4、left | left center | center left 等价于 0 50% | 0% 50%
    5、center | center center 等价于 50% 50%(默认值)
    6、right | right center | center right 等价于 100% 50%
    7、bottom left | left bottom 等价于 0 100% | 0% 100%
    8、bottom | bottom center | center bottom 等价于 50% 100%
    9、bottom right | right bottom 等价于 100% 100%

    • rotate3d(x,y,z,angle) 定义 3D 旋转
    • rotateX(angle) 定义沿着 X 轴的 3D 旋转 测试
    • rotateY(angle) 定义沿着 Y 轴的 3D 旋转
    • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
    • perspective(n) 为 3D 转换元素定义透视视图
  • 相关阅读:
    mysql报错:java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone.
    MD5登陆密码的生成
    15. 3Sum、16. 3Sum Closest和18. 4Sum
    11. Container With Most Water
    8. String to Integer (atoi)
    6. ZigZag Conversion
    5. Longest Palindromic Substring
    几种非线性激活函数介绍
    AI初探1
    AI初探
  • 原文地址:https://www.cnblogs.com/vs1435/p/5480794.html
Copyright © 2011-2022 走看看