CSS3 2D转换综合写法

CSS3 2D转换综合写法

CSS3 2D转换

  • 转换(transfrom)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
  • 转换(transfrom)可以简单的理解为变形
    • 移动:translate
    • 旋转:rotate
    • 缩放:scale

CSS3 2D转换综合写法

  • 注意

    • 同时使用多个转换，其格式为transform:translate()retate()scale()...等
    • 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
    • 当我们同时有位移和其它属性的时候，记得要将位移放到最前面

  • 我们还是用一张图片来做演示

<style>
       img {
           width: 150px;
           position: fixed;
           top: 50%;
           left: 50%;
           margin: -75px;
           transition: all .5s;
           transform-origin: 40px 40px;
       }

       img:hover {
           transform: translate(150px, 50px) rotate(180deg) scale(0.5);
       }
    </style>
</head>

<body>
    <img src="./u=986476525,3647648589&fm=11&gp=0.jpg" alt="">
</body>

posted @ 2020-03-09 16:11  懒惰ing  阅读(156)  评论(0)    收藏  举报