你们是如何避免transform:scale属性影响字体的？

Question

html结构：

<div class='parent'>
    <span>这是一些字体</span>    </div><style>.parent{            
    box-shadow:0px 0px 10px blue;            border-radius:5px;            
    padding:20px 40px;            display: inline-block;            
    margin-top:200px;            margin-left:800px;            font-size:18px;
}.parent:hover{            transform-origin:center;            transition:all 1s ease;            
transform: scale(2);
}</style>

当鼠标经过parent时候，这个div被放大了两倍，但是里面的字体同时也被放大了两倍，这样的效果是不需要的，你们遇到这个情况是如何处理以及解决的?

Answer 1

背景边框等样式可以写到伪元素上, 在 :hover 的时候触发伪元素的状态改变.(推荐)或者, 在 :hover 放大整个元素的同时, 缩小内部的文本节点.