css3的2D变形

一、2D变形

　　1、变形

　　　　transform:translate();translateX();translateY();translate(,);

　　2、过渡

　　　　transition:all 1s;

二、具体体现的例子

　　1、位移的实例　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3的2D变形</title>
    <style>
    div{
        width: 100px;
        height:100px;
        background-color: skyblue;
    }
    div:active{
        /* transform: translate(100px);写一个值：只有水平位移 */
        /* transform: translate(100px,200px);写两个值，一个水平一个竖直 */
        /* transform: translateX(100px);水平位移 */
        /* transform: translateY(100px);垂直位移 */
        /* 另外这里也可以写百分比，而这个百分比的参照物是自身 */
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　2、缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3的2D变形</title>
    <style>
    div{
        width: 100px;
        height:100px;
        background-color: skyblue;
        /* 让所有元素的变化到时在1秒钟缓步进行 */
        transition: all 1s;
    }
    div:active{
        /* 位移 */
        /* transform: translate(100px);写一个值：只有水平位移 */
        /* transform: translate(100px,200px);写两个值，一个水平一个竖直 */
        /* transform: translateX(100px);水平位移 */
        /* transform: translateY(100px);垂直位移 */
        /* 另外这里也可以写百分比，而这个百分比的参照物是自身 */
        /* 缩放 */
        /* transform: scale(1.2);相对于自身的1.2倍 宽高*/
        /* transform: scaleX(1.2);宽度相对于自身的1.2倍 */
        /* transform: scaleY(1.2);高度相对于自身的1.2倍 */
    
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　3、旋转

/* 旋转 */
        /* transform-origin: center; */
        /* 这里是默认的旋转参考点 ，还可以自行设置像素值，百分比等*/
        /* transform: rotate(-90deg);正负值代表旋转的方向 */

　　4、倾斜

 /* 倾斜 */
        /* transform: skew(90deg,0);水平垂直 */
        /* transform: skewX(60deg);水平 */
        /* transform: skewY(60deg);垂直 */

猜你喜欢