33.transition-rotate

最新推荐文章于 2023-04-21 17:08:02 发布

郭振澳

最新推荐文章于 2023-04-21 17:08:02 发布

阅读量342

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u011513939/article/details/74095153

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

transition-rotate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            div{
                width: 400px;
                margin:100px auto;
            }

            img{
                transition:all .5s;
            }

            img:hover{
                transform: rotate(360deg);
                /*transform: rotateX(1080deg);
                transform: rotateY(1080deg);
*/
                /*transform: skew(90deg);
                transform: skew(90deg);
                transform: skewX(50deg);
                transform: skewY(50deg);*/


                /*transform: scale(1);
                transform: scale(2);
                transform: scale(-2);
                transform: scale(0);
                transform: scale(1.5);
                transform: scale(2);*/
            }

    </style>
</head>
<body>
    <!-- 
        transform  
            translate(X,Y)
            translateX()
            translateY()

            rotate()   旋转   deg
            rotateX()   旋转  deg
            rotateY()   旋转  deg

            skew        扭曲   deg
            skewX       扭曲   deg
            skewY       扭曲   deg

            scale(num)  中心缩放
                        num: ... -2, -1, 0 , 1, 2 ....   系数也可以为小数

     -->
    <div>
        <img src="a.jpg" alt="" width=400   >
    </div>
</body>
</html>

郭振澳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
33.transition-rotate

transition-rotate<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 400px; margin:100px a
复制链接

扫一扫