transform 变形

最新推荐文章于 2024-06-29 10:28:55 发布

原创最新推荐文章于 2024-06-29 10:28:55 发布 · 129 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #CSS #transform

transform 变形

当鼠标按住使一个div水平平移一定距离
当鼠标放上去使一个div从中间缩放
当鼠标放上去使一个div旋转360度
鼠标放上去使div倾斜60度

属性值	说明
none	无变换
translate(长度值或百分数值)	在水平方向、垂直方向或两个方向上平移元素
translateX(长度值或百分数值)	在水平方向上平移元素
translateY(长度值或百分数值)	在垂直方向上平移元素
scale(数值)	在水平方向、垂直方向或两个方向上缩放元素
scaleX(数值)	在水平方向上缩放元素
scaleY(数值)	在垂直方向上缩放元素
rotate(角度)	旋转元素
skew(角度)	在水平方向、垂直方向或两个方向上使元素倾斜一定的角度
skewX(角度)	在水平方向上使元素倾斜一定的角度
skewY(角度)	在垂直方向上使元素倾斜一定的角度
matrix(4-6数值，逗号隔开)	指自定义变换

当鼠标按住使一个div水平平移一定距离

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .div1{
            width: 200px;
            height: 200px;
            background-color: black;
            position: absolute;
            top: 100px;
            left: 100px;
                /*可以用-webkit-transtion加一个过渡时间，使平移在1s的时间内完成*/
            -webkit-transition: 1s all;
        }
        .div1:active{
            transform: translateX(300px);
        }

    </style>
</head>
<body>
        <div class="div1"></div>
</body>
</html>

当鼠标放上去使一个div从中间缩放

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .div1{
            width: 200px;
            height: 200px;
            background-color: black;
            position: absolute;
            top: 100px;
            left: 100px;
            /*可以用-webkit-transtion加一个过渡时间*/
            -webkit-transition: 1s all;
        }
        .div1:hover{
            transform: scale(1.4);
            /*括号里数值大于1放大，小于1缩小*/
        }

    </style>
</head>
<body>
        <div class="div1"></div>
</body>
</html>

当鼠标放上去使一个div旋转360度

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .div1{
            width: 200px;
            height: 200px;
            background-color: black;
            position: absolute;
            top: 100px;
            left: 100px;
            /*可以用-webkit-transtion加一个过渡时间*/
            -webkit-transition: 2s all;
        }
        .div1:hover{
            transform: rotate(360deg);
        }

    </style>
</head>
<body>
        <div class="div1"></div>
</body>
</html>

鼠标放上去使div倾斜60度

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .div1{
            width: 200px;
            height: 200px;
            background-color: black;
            position: absolute;
            top: 100px;
            left: 100px;
            /*可以用-webkit-transtion加一个过渡时间*/
            -webkit-transition: 2s all;
        }
        .div1:hover{
            transform: skew(60deg);
        }

    </style>
</head>
<body>
        <div class="div1"></div>
</body>
</html>