CSS过渡,其中缩放的图像与整个图像库重叠
air*_*cn9 2 html css css-transitions
我试图在图片库上执行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片段中所做的那样.
/* =============== */
$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纵横比)和一些y坐标transform-origin
内部图像应用了简单的样式
.div-table img {
width: 100%;
}
所以他们可以在父div的过渡期间无缝扩展.
最后结果
最后,为了实用性,我想建议在内部插入一个小的边距div,这样可以更容易地选择网格中心的图像,特别是如果你计划有超过2行的图片.
| 归档时间： |
|
| 查看次数： |
96 次 |
| 最近记录： |