CSS缩放效果

Question

我已经创建了一个sudo CSS缩放效果，如下所示:

li{
  width: 200px;
    display: block;
    height: 30px;
  line-height: 30px;
  text-align: center;
  display: block;
  background: #eee;
  border: 1px solid #333;
  margin: 0 0 0 -40px;
    transition: all 0.5s ease;
  z-index: 999;
  &.active{
    background: #ccc;
  }
}
li:hover{
    position: relative;
  width: 205px;
  height: 35px;
  background: #eee;
  margin: -2.5px 0 -2.5px -42.5px;
  -webkit-box-shadow: 0px 0px 19px 0px rgba(50, 50, 50, 0.95);
  -moz-box-shadow:    0px 0px 19px 0px rgba(50, 50, 50, 0.95);
  box-shadow:         0px 0px 19px 0px rgba(50, 50, 50, 0.95);
}

Code Pen http://codepen.io/timbo27/pen/aeCgv

在纯CSS中一定有一种更优雅的方式来做到这一点。

谢谢,蒂姆

Answer 1

在网友的帮助下，我终于找到了答案。

http://codepen.io/anon/pen/pGAIo

不要忘记前缀。否则它将无法工作。

li:hover{
     -webkit-transform:scale(1.05);
     -moz-transform:scale(1.05);
     transform:scale(1.05);
}

Answer 2

是否更优雅取决于你，但你可以尝试CSS3的规模。下面是它的一个实际应用:

http://jsfiddle.net/27Syr/5/

transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */