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
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？