CSS过渡,其中缩放的图像与整个图像库重叠

问题描述 投票:2回答:1

我试图在图片库上执行CSS3过渡和叠加,并希望有一点帮助确定如何正确控制效果。看起来我需要根据位置将8个图像划分为4个略有不同的div包装(左上角图像需要向右和向下增长200%,右上角图像需要增长200%到左,下等等)。我的目的是消除屏幕上的剪辑或其他容器/元素。

每个图像应该生长并覆盖相邻的3个图像,使得其他部分中的其他元素不会发生剪切或者剪切窗口的范围。这应该发生在图像和文本叠加层上(暂时禁用文本叠加层)。

请问有关如何执行此类效果的一些建议吗?

以下只是我试图做的一个非常简单的示例。 (我似乎不明白如何在转换期间保持行位置。)

<!DOCTYPE html>
<html>
<head>
<style> 
    .div-table{
      display:table;
      width: auto;
    }
    div {
      width: 100px;
      height: 100px;
      position: relative;
      display: inline-block;
      -webkit-transition-property: width, height; /* For Safari 3.1 to 6.0*/
      -webkit-transition-duration: 4s; /* For Safari 3.1 to 6.0 */
      transition-property: width, height;
      transition-duration: 4s;
    }
    div:hover {
      position:absolute;
      z-index: 10;
      width: 425px;
      height: 425px;
    }
</style>
</head>
<body>

  <h1>My Gallery of Color Boxes</h1>

  <p>Hover over the element below, and it will expand to cover the other 
     elements in the table</p>
  <div class="div-table">
        <div style="background:red; "></div>
        <div style="background:green;"></div>
        <div style="background:purple;"></div>
        <div style="background:blue;"></div>
  </div>    
  <div class="div-table">
        <div style="background:black;"></div>
        <div style="background:yellow;"></div>
        <div style="background:brown;"></div>
        <div style="background:orange;"></div>
   </div>

</body>
</html>
html css css-transitions
1个回答
5
投票

我试着玩scale()转换

Codepen demo


块的基本位置通过Flexbox完成。当你徘徊div时,属性transform: scale(4, 2)将通过4的宽度和2乘以它的高度来拉伸块。结果,整个外部元件将被覆盖。

如果您需要在高度上拉伸更多,请更改scale()的第二个值。所有其他没有徘徊的街区将站在他们的位置。

当然,对于每个块,您需要设置正确的transform-origin属性。


标记

<div class="div-table">
    <div style="background:red; "></div>
    <div style="background:green;"></div>
    <div style="background:purple;"></div>
    <div style="background:blue;"></div>
    <div style="background:black;"></div>
    <div style="background:yellow;"></div>
    <div style="background:brown;"></div>
    <div style="background:orange;"></div>
</div>

CSS

.div-table {
    display:flex;
    flex-wrap: wrap;
    width: 400px;
}

.div-table div {
    flex: 0 0 100px;
    height: 100px;
    transition: 1s transform;
}

.div-table div:hover {
    z-index: 2;
    transform: scale(4, 2);
}


.div-table div:nth-child(1) { transform-origin : 0 0; }
.div-table div:nth-child(2) { transform-origin : 33.3% 0; }
.div-table div:nth-child(3) { transform-origin : 66.6% 0; }
.div-table div:nth-child(4) { transform-origin : 100% 0; }
.div-table div:nth-child(5) { transform-origin : 0     100%; }
.div-table div:nth-child(6) { transform-origin : 33.3% 100%; }
.div-table div:nth-child(7) { transform-origin : 66.6% 100%; }
.div-table div:nth-child(8) { transform-origin : 100%  100%; }

手动计算所有这些transform-origin可能很乏味,所以为了您的方便,您可以通过SASS根据行和列的数量生成几个嵌套for循环,就像我在这个SassMeister snippet中所做的那样

/* =============== */
$rows    : 2;
$columns : 4;
/* =============== */

$imagecounter : 1;    
@for $i from 1 through $rows {
  @for $j from 1 through $columns {
    div:nth-child(#{$imagecounter}) {
      transform-origin: 
        100%/($columns - 1) * ($j - 1)
        100%/($rows - 1) * ($i - 1);
    }
    $imagecounter : $imagecounter + 1;
  }
}

这是带有平方图像的实际图库的另一个示例

Codepen demo

在这个演示中,我已经将变换更改为scale(4, 4)(以便保持1:1宽高比)和transform-origin的一些y坐标

内部图像应用了简单的样式

.div-table img { 
    width: 100%; 
}

所以他们可以在父div的过渡期间无缝扩展。


最后结果

enter image description here

最后,为了实用性,我想建议在内部div中插入一个小的边距,这样可以更容易地选择网格中心的图像,特别是如果你计划有超过2行的图像。

© www.soinside.com 2019 - 2024. All rights reserved.