HTML5中CSS3的Transform属性

最新推荐文章于 2024-08-14 17:39:22 发布

枕梦

最新推荐文章于 2024-08-14 17:39:22 发布

阅读量5.1k

点赞数 3

分类专栏： HTML5+CSS 文章标签： transform

本文链接：https://blog.csdn.net/qq_37768482/article/details/71775491

版权

HTML5+CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

transform：属性值为变形函数
1.translate/translateX/translateY:在水平、垂直或两个方向上平移元素
2.Scale/ScaleX/ScaleY:在水平、垂直或两个方向上缩放元素
3.Rotate：旋转元素，单位deg
4.Skew/SkewX/SkewY:使元素倾斜一定的角度
Transform-orgin:指定变形的起点-lefttop

方位词：top/bottom/center/left/right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            border: 1px solid red;
            width: 170px;
            height: 195px;
            overflow: hidden;
            text-align: center;
        }
       /* img{
            !*1.从左上角为起点移动*!
            !*transform: translate(500px,100px);*!

            !*2.使元素倾斜一定的角度*!
            !*transform: skew(20deg);*!

            !*3.在水平、垂直或两个方向上缩放元素*!
            transform: scale(1.5);
        }*/

       img{
           /*transition:all 时间 缓动*/
           transition: all 1.2s ease;

       }
        img:hover{
            transform: scale(1.5);
            /*transform: rotateY(180deg);*/
        }
    </style>
    <title>Transform</title>
</head>
<body>

<div>
    <img src="../../img/f3_Android1.png" alt="">
</div>


</body>
</html>