CSS：将img旋转到-45度以使图像消失

Question

我的横幅无序排列。标语在左侧包含图片，在右侧包含文字。我使用了转换CSS来实现设计，并使用CSS列在移动设备中显示2列列表。在Chrome中，第二列不显示图像。在野生动物园时，我可以看到一些延迟。 在chrome中，当我从图像中删除transfrom旋转属性时。

尝试使用环绕img的包装容器并将其旋转。 Codepen：https://codepen.io/khanharis87/pen/ZVJmLX

<div class="component--assortment-tile">
  <div class="wrapper">
    <ul class="assortment-tile__container is-unstyled">
      <li class="long-tile" class="column is-half">
        <div class="long-tile__container">
          <div class="long-tile__content-conainer">
            <div class="long-tile__media-container">
              <div class="long-tile__media-figure-container">
                <figure class="long-tile__media-figure">
                  <div class="image-container">
                    <img src="https://placekitten.com/300/300" />
                  </div>
                </figure>
              </div>
            </div>
            <div class="wrapper">
              <div class="columns is-mobile">
                <div class="column is-half is-offset-6">
                  <div class="long-tile__content-conainer-text">
                    <h3>Title</h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="long-tile" class="column is-half">
        <div class="long-tile__container">
          <div class="long-tile__content-conainer">
            <div class="long-tile__media-container">
              <div class="long-tile__media-figure-container">
                <figure class="long-tile__media-figure">
                  <div class="image-container">
                    <img src="https://placekitten.com/300/300" />
                  </div>
                </figure>
              </div>
            </div>
            <div class="wrapper">
              <div class="columns is-mobile">
                <div class="column is-half is-offset-6">
                  <div class="long-tile__content-conainer-text">
                    <h3>Title</h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

.component--assortment-tile {
  ul {
    columns: 2;
  }

  li {
    width: 175px;
    height: 50px;
  }

   .long-tile {
    background-color: #fff1f2;
    overflow: hidden;
    position: relative;

    .long-tile__media-figure-container {
      border: 1px solid grey;
      align-items: center;
      display: flex;
      flex: 0 0 50%;
      max-width: 50%;
      overflow: hidden;
      position: absolute;
      right: 9.75rem;
      top: 0.4375rem;
      transform: rotate(45deg) scale(1.6);
    }

    h3 {

      padding-top: 6.25rem;
    }

    img {
      object-fit: cover;
      transform: rotate(-45deg) translateX(0%) scale(1.5);
      transform-origin: center center;
    }
  }
}