zoukankan      html  css  js  c++  java
  • CSS3中的变形处理(transform)属性

    在CSS3中,可以利用transform功能来实现文字或图像的旋转、扭曲、缩放、位移、矩阵、原点这六种类型的变形处理,下面将详细讲解transform的使用。


    变形--旋转 rotate()
    div.box{transform: rotate(45deg);} /*顺时针旋转45度*/
    变形--扭曲 skew()
     div.box{transform:skew(45deg);} /*通过skew()函数将长方形变成平行四边形。
        Skew()具有三种情况:
        1、skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);
        2、skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);
        3、skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)*/
    
    
    变形--缩放 scale()
     div.box{transform: scale(1.5,0.5);} /* 
        缩放 scale 具有三种情况:
        1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
        2、scaleX(x)元素仅水平方向缩放(X轴缩放)
        3、scaleY(y)元素仅垂直方向缩放(Y轴缩放)
        scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大。
    */
    变形--位移 translate()
    div.box{transform: translate(50px,100px);}  /*  通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。
        translate我们分为三种情况:
        1、translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
        2、translateX(x)仅水平方向移动(X轴移动)
        3、translateY(Y)仅垂直方向移动(Y轴移动)
        */

    变形--矩阵 matrix ()
        div.box{transform: matrix(1,0,0,1,100,100);}  /*
        matrix() 6个属性的意思的:第一个宽度比例1就是原大小,
    第二个是上下倾斜1就是2倍,2就是3倍,0就是不倾斜
    第三个是左右倾斜,数字和第二个一样的意思,
    第四个是高度比例1就是原大小,
    第五个是X方向的像素位移,X方向就是左右,
    第六个是Y方向的像素位移,X方向就是上下
    */

    变形--原点 transform-origin 
     div.box{transform-origin: left top;transform: rotate(45deg); }  /*
        改变元素原点到左上角,然后进行顺时旋转45度。*/
  • 相关阅读:
    为什么大多数IOC容器使用ApplicationContext,而不用BeanFactory
    重温Java泛型,带你更深入地理解它,更好的使用它!
    看完了这篇,面试的时候人人都能单手撸冒泡排序!
    JAVA基础4---序列化和反序列化深入整理(Hessian序列化)
    VS Code 变身小霸王游戏机!
    equals()方法和hashCode()方法详解
    openFeign远程调用时使用Mybatis-plus的IPage接口进行返回分页数据失败的记录
    通过express快速搭建一个node服务
    UML 类图
    jdk命令行工具系列——检视阅读
  • 原文地址:https://www.cnblogs.com/amy-1205/p/5842252.html
Copyright © 2011-2022 走看看