我在图片的某些位置放置了绝对定位的div块。由于我想让我的图片具有响应性,因此我希望绝对块也具有响应性。这就是我遇到的问题:我可以使用CSS的缩放和平移属性手动调整大小和平移,但它不具有响应性。
*{margin: 0;padding: 0}
.relat{position: relative;}
.abs {position:absolute;}
.cube1 {background-color: red;border: 1px solid black}
.cube2 {background-color: blue;border: 1px solid black;}
.cube3 {background-color: purple;border: 1px solid black;}
.cube1O {background-color:red;}
.cube2O {background-color: blue;}
.cube3O {background-color: purple;}
.transform{transform-origin: top left;}
.modify{transform: scale(0.5);}
.modify2{transform: scale(0.5) translate(-100%, 0);}
.modify3{transform: scale(0.5) translate(0, -100%);}
<div class="relat">
<div class="abs cube1O" style="top:0px;left:0px;width:200px;height:200px"></div>
<div class="abs cube2O" style="top:0px;left:200px;width:200px;height:200px"></div>
<div class="abs cube3O" style="top:200px;left:400px;width:200px;height:200px"></div>
<div class="abs cube1 transform modify" style="top:0px;left:0px;width:200px;height:200px"></div>
<div class="abs cube2 transform modify2" style="top:0px;left:200px;width:200px;height:200px"></div>
<div class="abs cube3 transform modify3" style="top:200px;left:200px;width:200px;height:200px"></div>
</div>
我无法从这些3个块的变换外观中(但实际上有很多个块),确定是否有唯一的css变换可应用于立方体。
我正在使用transform-origin: top left;使旋转点位于左上角。这是否重要?
问题出现在transform: scale(scaleXY) translate(transX, transY);
我无法想出对每个块使用唯一设置的变换。
我希望不要涉及javascript。有没有“简单”的方法来执行此任务?谢谢。
编辑:此外,我将top、left、width和height值放入内联样式中,因为在我的代码中,我从数据库获取它们:无法将它们放入CSS文件中。
编辑2:
查看与此问题相关的一些帖子,我发现也许我可以使用百分比值而不是固定像素值来解决我的问题。我会研究一下。
如果没有纯CSS解决方案,我也会对JavaScript解决方案感兴趣。
scale(xy) translate(x, y)
,适用于我可以使用绝对位置放置的每个块,从而允许容器进行响应式调整大小?类似于https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/。 - Overdose