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>
本文来自博客园,作者:懒惰ing,转载请注明原文链接:https://www.cnblogs.com/landuo629/p/12449297.html