zoukankan      html  css  js  c++  java
  • css3 变换 transform(2D)

    一、transform变换

      可做拉伸、压缩、旋转、偏移的效果。需加各个浏览器前缀。

    二、transform-origin

      为transform属性值的基点,默认值为元素的中心位置,即以元素左上角为坐标轴原点,向右为x轴,向下为y轴,基点为(50%,50%)。

      1. transform-origin:x y z;

        1)x轴 取值:left/center/right/length/%

          百分比换算:

                left-------------0%

                center----------50%

                right------------100%

        2)y轴 取值:top/center/bottom/length/%

          百分比换算:

                top--------------0%

                center----------50%

                right------------100%

        3)z轴 取值:length

          2D默认为0,3D效果设置。

    三、transform的属性值

      1.旋转 rotate(deg)

        通过指定的角度参数对元素以基点进行2D旋转。单位为deg。

      2.移动 translate(x,y)

        始终相对于元素中心偏移。单位为px。

        translateX(x);水平方向上的偏移量

        translateY(y);垂直方向上的偏移量

      3.缩放 scale(x,y)

        当值=1为原大小;值>1为放大;值<1为缩小。单位无。

        scaleX(x);水平方向上的缩放

        scaleY(y);垂直方向上的缩放

      4.倾斜 skew(x,y)

        给选定的元素进行以基点为中心的倾斜。单位为deg。

        skewX(x);水平方向上的倾斜

        skewY(y);垂直方向上的倾斜

      5.矩阵 matrix(rotateX,rotateY,rotate3D,translateZ,translate3D,scaleZ,scale3D)

        矩阵一共有6个参数。

  • 相关阅读:
    CBR(基于案例的推理)的产生和Roger Schank=Schank教授在他的著作中提出了以“记忆组织包"
    php 设计模式
    php 常用资源
    自然语言处理著作或期刊名称2
    北京师范大学语言学及应用语言学研究生培养方案
    !!! Analysis & Design 很好的汇总+zcl的 UML 体会
    睡眠的方法
    !!!【php100教程】
    机器翻译和自然语言信息处理专业硕士研究生培养方案
    愧薪
  • 原文地址:https://www.cnblogs.com/whiteMu/p/5392400.html
Copyright © 2011-2022 走看看