zoukankan      html  css  js  c++  java
  • CSS3 2D转换

    转换:就是使用transform属性将html元素

    2D转换:在二维空间内转换     x,y

    3D转换:在三维空间内转换  x,y,z

      移动 translate:将元素在x轴或y轴上进行移动

        实例:transform:translate(20px,30px); x轴上像右移动20px,在y轴上像下移动30px;

        translate(x,y);

          x轴上移动距离,可以是长度,也可以是百分比

          y轴上移动距离,可以是长度或百分比 ,可选 默认值为0

        你也可以使用tanslateXtranslateY函数分别设置X轴和Y轴的值。

      旋转 rotate:可以根据指定的角度旋转元素

        实例:transform:rotate(45deg);  顺时针旋转45度角,如果是负数,表示逆时针旋转

      缩放 scale:可以叫元素放大或缩小

        实例transform:scale(1.2);    长宽放大到1.2倍,如果是0.2  就是缩小0.2倍

        scale(x,y);

          X:x轴上的缩放倍数;

          Y:y轴上缩放倍数;可选 默认值 同第一个参数一样

      你也可以使用scaleXscaleY函数分别设置x轴和y轴的值

      倾斜 skew:可以将元素倾斜显示

        实例:transform:skew(45deg,-20deg);           将元素x轴倾斜45度角,Y轴倾斜-20度角可选 默认是0

        skew(x,y);      

          X:x轴上倾斜的角度

          Y:y轴上倾斜的角度

      同样你可以使用skewX和skewY函数分别设置x轴和y轴的值

     

    使用多个函数

      transfrom属性中可以写多个转换函数

        transform:scale(1.2) rotate(45deg);

     

    transform-origin(转换基准点)

      CSS中默认的转换基准点是元素中心点

      使用trnaform-origin属性,可以更改元素转换的基准点

    实例:

      transform:rotate(45deg);

      trnasform-origin:left top;     设置基准点为左上角

    trnasform-origin:x,y,z;

      X:默认值50%   基准点在x轴上的位置   (left center right 长度 百分比)

      Y:默认值50%  基准点在y轴上的位置   (top center  bottom  长度 百分比)

      z:默认是0   基准点在z轴上的位置   (长度)

     

     

  • 相关阅读:
    WTS_INFO_CLASS enumeration
    奇淫怪巧之给Delphi的PrintDialog增加一个页码选定范围打印的Edit
    Delphi的参数传递约定以及动态参数个数(转载笔记)
    C++中的模板那点事
    那些年我们一起学过的“排序算法”
    STL中的set容器的一点总结
    设计模式之备忘录模式(Memento)
    小程序员的趣味题(一)
    STL中的vector容器的一点总结
    STL中的list容器的一点总结
  • 原文地址:https://www.cnblogs.com/xiaowie/p/9875512.html
Copyright © 2011-2022 走看看