Question

当我尝试使用“perspective”属性然后“transform：rotateY（10deg）”时，效果也适用于children元素。我想要一个带透视的矩形，但不希望里面的文字是透视的。有什么想法吗？

我已经创建了一个JSFIDDLE示例 https://jsfiddle.net/j0ofgbLo/1/

.container {
    perspective: 500px;
}

.content{
   transform: rotateY(-45deg);
   background: #ddd;
    min-width: 100px;    
    padding: 0 20px;    
}

<div class="container">
    <div class="content">
        <h3>Text</h3>
    </div>
</div>

Answer 1

CSS perspective-property只是将视角应用于孩子而不是自身。要获得“unflattened”/透视结果，只需将此规则放在content元素上：

transform-style: preserve-3d;

把它放在你的H3元素上：

transform: rotateY(45deg);

如果内容元素被转换或具有透视，则构建包含块和堆叠上下文，因此无论如何都要强制孩子渲染到该图层。这意味着你不能在转换的上下文中使用固定元素（在IE11中你可以）跳过祖先转换。因此，您必须以透视方式反转目标元素（H3）上的转换以获得未失真的结果。

.container 
{
    perspective: 500px;
}

.content
{
   transform: rotateY(-45deg);
   background: #ddd;
   min-width: 100px;    
   padding: 0 20px;    
   transform-style: preserve-3d;
}

h3
{
   transform: rotateY(45deg); 
}

<div class="container">
    <div class="content">
        <h3>Text</h3>
    </div>
</div>

Answer 2

你需要放出容器并用div包装容器和内容。我创建一个小提琴工作，第一个块就像你定义的那样（容器和内容继承透视图），第二个块就像我告诉你一个包装器（透视图仅用于容器，而不用于内容）。

http://jsfiddle.net/c72b5184/1/

代码是这样的（注意正确的版本是.wrapper *）

.container {
    background-color: blue;
    width: 200px;
    transform: rotateY(50deg);
    height: 200px;
}
.content {
    background-color: green;
    width: 50px;
    height: 50px;
}

.wrapper {
    position: relative;
    margin: 20px 0;
}
.wrapper .container,
.wrapper .content{
    position: absolute;
    top: 0;
    left:0;
}

HTML

<div class="container">
    <div class="content"></div>
</div>

<div class="wrapper">
    <div class="container"></div>
    <div class="content"></div>
</div>

Answer 3

最后，我解决了这个问题。如果有人想要做类似的事情，这是codepen和代码：

http://codepen.io/marinagallardo/pen/jPjBMV

<div class="heading">
  <p>Texto</p>
</div>


<div class="heading">
  <p>Texto a top de largo</p>
</div>



<div class="heading">
  <p>Prácticamente escribiendo el quijote</p>
</div>


<div class="heading">
  <p>Prácticamente escribiendo el quijote, lo cual es una prueba</p>
</div>

.heading
  background: red
  display: inline-block
  margin: 20px
  border-radius: 3px
  color: white
  position: relative
  height: 40px
  transform: skewX(-1deg)
  p 
    padding: 0 20px
    margin: 0
    position: relative
    z-index: 100
    margin-top: 10px
    transform: skewX(1deg)    
  &:before
    content: ''
    display: block
    height: 50%
    top: -9px
    width: 100%
    background: red
    transform: skewY(-2deg)
    position: absolute
    border-radius: 3px
  &:after
    content: ''
    display: block
    height: 50%
    background: red
    transform: skewY(2deg)
    position: absolute
    bottom: -8px
    width: 100%
    border-radius: 3px

将透视CSS仅转换为容器，而不是内容

3 个答案: