html - 相对于侧面缩放块

Question

如何使积木不是从中心增加，而是从积木 1 2 应该增加到右侧和 3 4 到左侧的边缘增加。

div#fotoContainer div#zoomFoto {

    display: inline-block;
    background-color: green;
    transition: transform .2s;
    width: 40%;
    border-top: 1px solid gray;
    font-size: 150%;
      float: right;
border: 1px solid black;

}

div#fotoContainer div#zoomFoto:hover {

    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);

}

<div id="fotoContainer">
<div id="zoomFoto"><figure>3</figure></div><!--
--><div id="zoomFoto"><figure>1</figure></div>




<div id="zoomFoto"><figure>4</figure></div><!--
--><div id="zoomFoto"><figure>2</figure></div>



</div>

标签： htmlcss

Answer 1

您正在寻找的是财产transform-origin。

div#fotoContainer div#zoomFoto {

    display: inline-block;
    background-color: green;
    transition: transform .2s;
    width: 40%;
    border-top: 1px solid gray;
    font-size: 150%;
      float: right;
border: 1px solid black;

}

div#fotoContainer div#zoomFoto:hover {

    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);

}

.left-box {
  transform-origin: center right;
}

.right-box {
  transform-origin: center left;
}

<div id="fotoContainer">
<div id="zoomFoto" class="right-box"><figure>3</figure></div><!--
--><div id="zoomFoto" class="left-box"><figure>1</figure></div>




<div id="zoomFoto" class="right-box"><figure>4</figure></div><!--
--><div id="zoomFoto" class="left-box"><figure>2</figure></div>



</div>