Html5 css3學習--2D變形

xiaopengyaonixi發表於2016-10-08
HTMLCSSS3

語法：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>


相關文章