css之2d缩放和旋转

基本语法:transform:scale(参数);
对元素进行水平或垂直方向的缩放
scale(参数):沿着x轴y轴放大缩小n倍
scale(参数1,参数2);沿着水平放大缩小x倍,沿着垂直方向放大缩小y倍
scaleX(参数):沿着水平放大缩小x倍
scaleX(参数):沿着垂直方向放大缩小y倍
案例:

    <style>
        div{
            height: 500px;
            width: 500px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }
        img{
            transition: all 2s;
            
        }
        div:hover img{
            transform: scale(1.5);
        }
    </style>
</head>
<body>
    <div>
        <img src="../image/01.jpg" alt="">
    </div>
</body>

旋转基本语法:transform:routate()
对元素进行旋转,取值使用度数(deg),正值为顺时针,负值为逆时针。
rotate(参数):围绕元素的正中心进行旋转
rotateX(参数):围绕x轴进行旋转
rotateY(参数):围绕y轴进行旋转

你可能感兴趣的:(css,前端,javascript)