css3 2D變換 transform

時間 2019-12-05

標籤 css3 css 2d 變換 transform 欄目 CSS 简体版

原文原文鏈接

旋轉函數rotate()，deg表示度數，transform-origin表示旋轉的基點

<head>
    <title>無標題文檔</title>
    <style>
        body{height:400px;border:1px solid #000;}
        .box{width:100px;height:100px;background:red;margin:100px auto 0; transition:2s;}
        body:hover .box{ -webkit-transform:rotate(360deg);}
    </style>
</head>
<body>
    <div class="box">111</div>
</body>

斜切，將矩形等形狀扭曲，skewX(100deg),skrewY(30deg),以及x方向和y方向都斜切skew(15deg, 30deg)

<head>
    <title>無標題文檔</title>
    <style>
        body{height:400px;border:1px solid #000;}
        .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
        body:hover .box{ -webkit-transform:skewX(45deg);}
    </style>
</head>
<body>
    <div class="box">111</div>
</body>

縮放，scale()

<head>
    <title>無標題文檔</title>
    <style>
        body{height:400px;border:1px solid #000;}
        .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
        body:hover .box{ -webkit-transform:scale(2);}
    </style>
</head>
<body>
    <div class="box">111</div>
</body>

位置移動，translate(100px 200px)，translateX(100px)，translateY(200px)

<head>
    <title>無標題文檔</title>
    <style>
        body{height:400px;border:1px solid #000;}
        .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
        body:hover .box{ -webkit-transform:translate(-100px,200px);}
    </style>
</head>
<body>
    <div class="box">111</div>
</body>

1. css3 變換 transform(2D)
2. 2D變形(CSS3) transform
3. css3-----transform（變換）
4. CSS3 transform變換
5. CSS3 2D Transform Matrix
6. CSS3 2D Transform
7. css3 transform 2d
8. CSS3之2D與3D變換
9. CSS3-transform 轉換/變換
10. CSS3 2D轉換
更多相關文章...
• XSLT - 轉換 - XSLT 教程
• PHP imageaffine - 返回經過仿射變換後的圖像 - PHP參考手冊
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• ☆技術問答集錦（13）Java Instrument原理

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。