Html5 css3学习--2D变形

最新推荐文章于 2021-06-20 00:04:21 发布

xiaopengyaonixi

最新推荐文章于 2021-06-20 00:04:21 发布

阅读量1.4k

点赞数

分类专栏： Html5

本文链接：https://blog.csdn.net/W3Chhhhhh/article/details/52754546

版权

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

语法：transform:none | <transform-function>[transform-function]*

常用的变形函数有： 1.matrix():定义矩阵变换

2.translate();移动元素

3.scale();缩放元素

4.rotate();旋转元素

5.skew();倾斜元素对象

语法：transition: property duration timing-function delay;

简单实例：

1.使用旋转和缩放函数对元素进行变换，同时添加transition属性对动画进行平稳过度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #haha {
            width: 100px;
            height: 100px;
            border: solid 1px green;
            margin: 0 auto;
            margin-top: 100px;
            background-color: pink;
            /*定义动画过程*/
            -webkit-transition: transform .5s ease-in;
            -moz-transition: transform .5s ease-in;
            -ms-transition: transform .5s ease-in;
            -o-transition: transform .5s ease-in;
            transition: transform .5s ease-in;
        }

        #haha:hover {
            -webkit-transform: rotate(180deg) scale(2);
            -moz-transform: rotate(180deg) scale(2);
            -ms-transform: rotate(180deg) scale(2);
            -o-transform: rotate(180deg) scale(2);
            transform: rotate(180deg) scale(2);
        }
    </style>
</head>
<body>
<div id="haha"></div>
</body>
</html>

2.使用skew进行元素的平移。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .test ul{
            list-style:none;
        }
        .test li{
            float:left;
            width:100px;
            background:#ccc;
            text-decoration: none;
            line-height:30px;
            -webkit-transform: skew(10deg);
            -moz-transform: skew(10deg);
            -ms-transform: skew(10deg);
            -o-transform: skew(10deg);
            transform: skew(10deg);
        }
        .test a{
            display:block;
            text-align:center;
            height:30px;
        }
        .test a:link{
            color:#666;
            text-decoration:none;
        }
        .test a:visited{
            color:#666;
            text-decoration: underline;
        }
        .test a:hover{
            color:#fff;
            background-color:darkred;
            font-weight: bold;
            text-decoration: none;
            -webkit-transform: scale(1.1) translate(4px,4px) skew(5deg);
            -moz-transform: scale(1.1) translate(4px,4px) skew(5deg);
            -ms-transform: scale(1.1) translate(4px,4px) skew(5deg);
            -o-transform: scale(1.1) translate(4px,4px) skew(5deg);
            transform: scale(1.1) translate(4px,4px) skew(5deg);
        }
    </style>
</head>
<body>
    <div class="test">
        <ul>
            <li><a href="1">首页</a></li>
            <li><a href="2">新闻</a></li>
            <li><a href="3">论坛</a></li>
            <li><a href="4">博客</a></li>
            <li><a href="5">团购</a></li>
            <li><a href="6">微博</a></li>
        </ul>
    </div>
</body>
</html>

3.使用transition定义元素过度的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            background-color: #ffff00;
            color: #000000;
            width: 500px;
            -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
            -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
            -ms-transition: background-color 1s linear, color 1s linear, width 1s linear;
            -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
            transition: background-color 1s linear, color 1s linear, width 1s linear;
        }

        div:hover {
            background-color: #003366;
            color: #ffffff;
            width: 600px;
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div>新闻 网页 贴吧 知道 图片</div> 
</body>
</html>