2D變換

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>2D變換</title>
        <style type="text/css">
            .redDiv{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-left: 100px;
                transition: all 1s;
                /*trandform:2D變換用得都是transform；
                 
                 rotate：旋轉(zhuǎn)，可以給角度，
                 可以是負(fù)數(shù)*/
                /*transform: rotate(45deg);
                margin: 100px auto;*/
                
                /*translate 就是平移，平移的時候不會影響其他元素的位置（在文檔流的位置不變，只是視覺上面會出現(xiàn)偏移）*/
                /*transform: translate(0px,100px);*/
                
                /*scale 縮放，縮放的時候，默認(rèn)值是從中心向兩邊縮放，
                 也不影響其他元素*/
                /*transform: scale(2);*/
                
                
                /*skew 傾斜
                 傾斜的時候，會讓文字也跟著傾斜，可以給文字嵌套塊級標(biāo)簽，通過反傾斜（傾斜給負(fù)數(shù)）
                 來讓文字變正*/
                /*transform: skewX(30deg);*/
            }
            /*p{
                transform: skewX(-30deg);
            }*/
            .redDiv:hover{
                /*transform-origin  可以修改變換的原點。（以那個個點為軸心去旋轉(zhuǎn)）
                 可以設(shè)置英文字母  left top
                 可以設(shè)置像素  100px  0px
                 可以設(shè)置百分比  50% 0
                 
                 修改原點對于
                 平移沒作用
                 對縮放、旋轉(zhuǎn)、傾斜有作用*/
                transform-origin: 300px 100px; 
                transform: skew(50deg);
            }
            
        </style>
    </head>
    <body>
        <div class="redDiv"><p>123</p></div>
    </body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容