如何将兄弟元素的旋转中心标题旋转45度

Question

我有这个滑块here。图像偏向45度左右。下面是整个块的HTML：

<a href="#" class="home-slider-item gallery_item">
    <div class="home-slider-inner">
        <img src="images/b-3.jpg" alt="">
        <div class="caption-box-background">
        </div>
    </div>
    <div class="caption-box">
        <i class="fa fa-android "></i>
        <p>Phychological<br> Consultation</p>
    </div>
</a>

转换适用于.home-slider-inner

-webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
    -moz-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
    -ms-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
    transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
    border-right: 5px solid orange;
    overflow: hidden;
    position: relative;
    transform-origin: 0 100%;

因此，如下所示，标题不会居中：

截至目前，我正在对标题框应用否定margin-left以使文本看起来居中，但此解决方案在所有屏幕尺寸上都无法正常工作，需要在许多分辨率上添加。那么如何将标题框置于偏斜的图像中心呢？

我提出的动态解决方案的一个解决方案是计算width的{​​{1}}，然后在标题框中应用负边距：

skew

我不知道如何做到这一点，我只是认为这是一个可能的解决方案。有人可以指导我如何在不使用hacky negatice margin-left: width of skew / 2; 的情况下将caption box集中在一起！

P.S。由于转换使文本看起来模糊，我不得不将标题写为父margin-left的单独子项，因此如果有人回答这个问题，解决方案的用例将非常普遍。

Answer 1

在倾斜中，我们有一个直角三角形的情况，并且倾斜的新宽度等于“相反”而我们的角度相反，所以通过这个等式，我们可以得到相邻的 相反=相邻* tan（角度）;在skewX的情况下相反的是div高度，而在skewY的情况下则是div宽度

然后通过添加div宽度的相邻值，我们可以得到新的宽度

我创建了一个用于计算倾斜新宽度和新高度的plunkr https://embed.plnkr.co/uBeH84h9TgBT3zaVNHBZ/

Answer 2

最好的解决方案是在标题所在的位置进行偏斜。这样，它的水平对齐就不会受到干扰。

我相信这会在这里大致发生：

.home-slider-inner {
     transform-origin: 0 calc(50vh - 100px);
}

但无论如何，您可以根据您的具体需求进行调整。