CSS-2D转换

阿胜。。

于 2020-08-02 21:30:21 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/note__book/article/details/107751533

本文深入讲解CSS中的transform函数，包括坐标平移translate、盒子旋转rotate和缩放scale的使用技巧。探讨了transform如何不影响其他元素位置，translate配合定位实现居中效果，rotate与中心点的关系及scale函数的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天上传了自己做的一个前端页面，有兴趣的朋友可以点击去看看，虽然很low但是纯净五毒，这里附上网址http://heyma.usa3v.net/。
今天主要学习了transform函数，实现了坐标的平移translate，盒子的旋转rotate，以及缩放scale。需要注意的是：
1.transform不会影响其他元素的原有位置。
2.translate配合定位可以实现居中的效果，例如：position：absolute；top：50%；transform:translate(-50%,-50%)这个的好处是可以随着父盒子的变化而变化；
3.rotato这个函数主要是注意它的变化是和中心点有关的，设置中心点可以改变转动的位置，中心点可以由transfor-origin来改变。
4.scale函数注意放大倍数>1,缩小<1
5.可以结合translation，：hover一起使用效果更加