縮放傾斜效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>2D變換中的旋轉和平移效果</title>
        <style>
            #mydiv{
                width: 200px;
                height: 200px;
                background-color: red;
                margin:200px;
            }
            #mydiv:hover{
                transition: all 4s;
                /*平移效果*/
                /*transform: translateY(-150PX);
                -webkit-transform: translateY(-150px);*/
                /*旋轉效果*/
                transform: rotate(40deg);
                -webkit-transform: rotate(40deg);
                /*調整旋轉中心*/
                transform-origin: 50%,50%;
                -webkit-transform-origin:50% 50% ;
            }
        </style>
    </head>
    <body>
        <div id="mydiv"></div>
    </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章