css - 如何在不影响文本的情况下在父/祖先上使用透视 CSS3？

Question

当对其中一位祖先使用透视时，我对文本有一点疑问。 需要使用透视，这样我才能创建所需的形状。使用它的缺点是文本在右侧变大，不那么清晰，而且它的方向受到影响。

有解决办法吗？甚至可能是一种不同的方法如何在不影响文本的情况下获得相同的形状。

非常感谢您的帮助:)

代码如下: fiddle

.original{
    perspective: 200px;
    perspective-origin: -15% 0;
    position:absolute;
    left:4%;
    top:17%;
}
.spin{
    transform-style: preserve-3d;
}
.slide-info {
    padding:1em;
    background-color: rgba(13,166,229,.5);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateX(-6deg) skew(-4deg) scaleY(1.5) rotateY(-4deg) skewY(-1.5deg);
    color: #fff;
}
h4{
    text-transform:uppercase;
    font-size:1.5em;
    transform: skew(4deg) scaleY(1) skewY(1.5deg);
}
p{
    text-transform:uppercase;
    font-weight:bold;
    font-size:1em;
    transform: skew(4deg) scaleY(1) skewY(1.5deg);
}

<div class="original">
    <div class="spin">
        <div class="slide-info">
            <h4>A long long title ............... AAAAAA</h4>
            <p>Some long text in here text in here some text</p>
            <p>Some text in here</p>
        </div>
    </div>
</div>

Answer 1

将背景放在单独的 div 上。

.original {
    perspective: 200px;
    perspective-origin: -15% 0;
    position:absolute;
    left:4%;
    top:17%;
}
.spin {
    transform-style: preserve-3d;
}
.slide-info {
    padding:1em;
    color: #fff;
    position: relative;
}
.slide-info-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 166, 229, .5);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateX(-6deg) skew(-4deg) scaleY(1.5) rotateY(-4deg) skewY(-1.5deg);
}
h4 {
    text-transform:uppercase;
    font-size:1.5em;
    transform: skew(4deg) scaleY(1) skewY(1.5deg);
}
p {
    text-transform:uppercase;
    font-weight:bold;
    font-size:1em;
    transform: skew(4deg) scaleY(1) skewY(1.5deg);
}

<div class="original">
    <div class="spin">
        <div class="slide-info">
            <div class="slide-info-bg"></div>
             <h4>A long long title ............... AAAAAA</h4>

            <p>Some long text in here text in here some text</p>
            <p>Some text in here</p>
        </div>
    </div>
</div>