前端（自用）-transform

最新推荐文章于 2024-05-12 11:58:43 发布

姜姜巨菜

最新推荐文章于 2024-05-12 11:58:43 发布

阅读量217

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/jiangcaicai2/article/details/125967533

版权

本文介绍了CSS中的2D转换，以translate为例展示了如何实现分页按钮的平移效果。当结合scale进行缩放时，元素的位移方向会因缩放而改变。此外，文章总结了2D转换的关键点，包括转换顺序的影响以及综合使用技巧。

摘要由CSDN通过智能技术生成

transform转换

2D转换

代码：

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul>

/* translate分页按钮案例 */ li { float: left; width: 30px; height: 30px; border: 1px solid lightgreen; text-align: center; line-height: 30px; list-style: none; margin: 10px; border-radius: 15px; cursor: pointer; transition: all .4s; } li:hover{ transform: scale(1.2); }

2D转换综合写法顺序