Question

我正试图在div上创建一个空中飞人效果。我正在使用透视来塑造div。但我无法解决的是如何使内容正常。我无法正确设置以反转效果。

例如，我将使用#shape和#inside：

#shape {
    height: 300px;
    width: 300px;
    transform: perspective( 600px ) rotateY( -60deg );
    -webkit-transform: perspective( 600px ) rotateX( -60deg );
}
#shape #inside {
    //what do I put here to reverse the perspective effect?
}

Answer 1

我认为您最好的选择是使用包含#shape和#inside的包装div。这样，文本内容就不会发生变化。例如，见this jsFiddle。基本理念：

HTML：

<div id="wrapper">
    <div id="shape"></div>
    <div id="inside">
        Some content.
    </div>
</div>

CSS：

#wrapper {
    position: relative;
}
#shape {
    height: 300px;
    width: 300px;
    background: red;
    color: #511;
    position: absolute;
    z-index: -1;
}
#shape.transform {
    transform: perspective( 600px ) rotateY( -60deg );
    -webkit-transform: perspective( 600px ) rotateX( -60deg );
}

但是，您可能会发现，在转换形状时，您希望对内部文本应用一些特殊样式。最简单的方法是将transform样式分配给#wrapper。例如，this jsFiddle。

#wrapper.transform #shape {
    transform: perspective( 600px ) rotateY( -60deg );
    -webkit-transform: perspective( 600px ) rotateX( -60deg );
}
#wrapper.transform #inside {
    transform: translate(50px, 100px);
    -webkit-transform: translate(50px, 100px);
}

反对透视效应

1 个答案: