如何变换：使用CSS缩放div的顶部和底部

Question

如何使用CSS缩放<div>的顶部和底部？因为使用transform: scale(1.01);会使整个div缩小，我只想扩展图像的顶部和底部。

这是我想要实现的目标：

Answer 1

您可以使用peerhost()来缩放元素的顶部和底部。通用scaleY()可以缩放X和Y轴上的元素。

＆＃13;

＆＃13;

scale()

＆＃13;

div {
  float: left;
  height: 100px;
  width: 100px;
  border: 1px solid;
  margin: 10px;
}
.scaled{
  transform: scaleY(1.1);
}

.normal:hover{
  transform: scaleY(1.1);
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

就个人而言，我根本不会使用任何变换。

通过使用具有更好浏览器支持的margin和padding来实现相同的效果：

＆＃13;

＆＃13;

.container {
    background : #789c54;
    padding : 3em 0 0 0;
}

body {
    margin : 0;
    padding : 0;
    background : #b2978c;
}

.paddy {
    padding : 2em;
}

.block1, .block2, .block3 {
    float : left;
    background : #3e402f;
    color : #d1d2c8;
    width : 33.333333%;
}

.block1 {
    background : #e4dad6;
    padding : 10px 0;
    margin : -10px 0;
    color : #77856b;
}

＆＃13;

<div class="container">
  <div class="block1">
    <div class="paddy">
       Block 1
    </div>
  </div>
  <div class="block2">
    <div class="paddy">
       Block 2
    </div>
  </div>
  <div class="block3">
    <div class="paddy">
       Block 3
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

（另见this Fiddle）