如何使用 CSS transform:scale div 的顶部和底部

Question

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

这是我想要实现的目标：

Answer 1

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

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

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

<div class='scaled'>Scaled div</div>
<div class='normal'>Normal div</div>
<div class='normal'>Normal div</div>
<div class='normal'>Normal div</div>

Answer 2

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

您可以通过使用 margins 和 paddings 来达到相同的效果，后者具有更好的浏览器支持：

.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;
}

<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>

（另见 this Fiddle）

如何使用 CSS transform:scale div 的顶部和底部

How to transform:scale the top and bottom part of a div using CSS

html

css

css-transforms