我试图在图片库上执行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>
我试着玩scale()
转换
块的基本位置通过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;
}
}
这是带有平方图像的实际图库的另一个示例
在这个演示中,我已经将变换更改为scale(4, 4)
(以便保持1:1
宽高比)和transform-origin
的一些y坐标
内部图像应用了简单的样式
.div-table img {
width: 100%;
}
所以他们可以在父div的过渡期间无缝扩展。
最后结果
最后,为了实用性,我想建议在内部div
中插入一个小的边距,这样可以更容易地选择网格中心的图像,特别是如果你计划有超过2行的图像。