如何消除元素放大缩小，对其他元素造成的影响

Question

在代码中插入了一排4个 ICON，添加了hove放大的效果，但是一个ICON放大的时候，会影响到其他的，都会有一个晃动的效果， 如何消除这种效果？已经试图通过 margin来调整相互之间的空间了，但是不能做到互不影响。

                               <i class="fa fa-flag"></i>
                               <i class="fa fa-check-square-o"></i>
                                <i class="fa fa-eye"></i>
                                <i class="fa fa-edit"></i>
                            </a>

.fa-flag { margin: 5px 3px; }
.fa-flag:hover ,
.fa-flag:target { color: #ff00ff; font-size:20px; margin: 1px 1px;}

Answer 1

可以使用transform放大缩小元素，元素放大后所占的位置并不会变大。transform还有许多好用的功能，详情请看mdn的介绍。

transform: scale(2);

Answer 2

transform: rotate(360deg);-webkit-transform: rotate(360deg);

Answer 3

css3的 transform可以解决，如若兼容性好，建议使用定位使其脱离文档流。