【CSS3练习】transform 2d变形实例练习

transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能

【CSS3练习】transform 2d变形实例练习

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>transform</title>

    <style>

        .box{background-color: #000;width: 100px;height: 100px;transition: 2s ease;margin:20px;display: inline-block;}

         

        /* 旋转 */

        #box:hover{transform:rotate(360deg);}

         

        /*  X 和 Y 轴的 2D 倾斜转换 */

        #box2:hover{transform:skew(45deg,0deg);}

 

        /*  x y 缩放 */

        #box3:hover{transform:scale(2,2);}



        /*  x y 转换 */

        #box4:hover{transform:translateX(200px) translateY(200px);}

    </style>

</head>

<body>

 

    <div class="box" id="box"></div>

    <div class="box" id="box2"></div>

    <div class="box" id="box3"></div>

    <div class="box" id="box4"></div>

</body>

</html>

  

你可能感兴趣的:(transform)