css变换原点不是从中心缩放
css变换原点不是从中心缩放
提问于 2020-02-11 07:52:20
我有一个svg图标有三个部分，fb标志，一个破折号的环，这是目前设置为不可见的和一个外环。外环是问题所在。我使用hover psuedo选择器通过scale()属性展开环。它的伸缩性很好，问题是它向右发射，而不是仅仅停留在中间。根据我使用transform-origin读到的内容: center center或50% 50%应该可以修复它(并且它已经在我正在工作的其他徽标上)，在这种情况下它不能。
这是笔，相关代码从第24行开始
https://codepen.io/cole-pratt/pen/poJJdzy?editors=1100
.facebook-outline, .facebook-detail {
transition: 300ms all;
transform-origin: center center;
}
.facebook-detail {
opacity: 0;
}
.facebook-icon-group:hover {
.facebook-outline {transform: scale(1.8); opacity: 0;}
}Stack Overflow用户
发布于 2020-02-11 08:00:23
你说得对，默认的不是从中心开始缩放，而是缩放viewBox。您可以通过添加
transform-box: fill-box;例如：
.facebook-outline, .facebook-detail {
transition: 300ms all;
transform-origin: center center;
transform-box: fill-box;
}。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60160135
复制相关文章
相似问题
腾讯云开发者
