css - 如何将元素的左侧部分绕 y 轴旋转 25 度

Question

我希望创建一个样式规则，将左侧部分中的 aside 元素绕 y 轴旋转 25°，并创建另一个样式规则，将右侧部分中的 aside 元素围绕 y 轴旋转 –25°-轴。

CSS:

section-left.aside {
transform: rotateY(25deg);
}

section-right.aside {
transform: rotateY(-25deg);
}

html:

    <section id="right">
  <aside>
     <h1>Merchandise</h1>
     <p>Special discount pricing on all Chupacabra15 clothing, posters and
        souvenirs available now. Gift cards and volume pricing are also
        available.</p>
     <p>Shop our <a href="#">online store</a> to get the best deals.</p>
  </aside>
  <aside>
     <h1>Online Chat</h1>
     <p>Snow Storm Pilot will be hosting an online chat to discuss
        their upcoming concert tour. Enter a <a href="#">drawing</a> to win a VIP pass 
        for their show at Chupacabra15!</p>
  </aside>
  <aside>
     <h1>Sponsors</h1>
     <p>Visit our <a href="#">Sponsors Page</a> to get great online deals
        for Chupacabra15 promotional items and merchandise.</p>
     <p>Want to become a sponsor of this great event? <a href="#">Contact
        us</a> to learn how!</p>
  </aside>

有人可以告诉我我缺少什么吗？非常感谢

Answer 1

正如我在评论中提到的，我认为您的规则不正确。

我做了一个代码笔示例，您可以查看 here。

<div style="width: 1200px; margin: 0 auto;">
  <section class="left">
    <aside>123</aside>
    <aside>123</aside>
  </section>
  <section class="middle">
    <article></article>
  </section>
  <section class="right">
    <aside>456</aside>
    <aside>456</aside>
  </section>
</div>

.left, .middle, .right {
  float: left;
  min-height: 500px;
  background: #DDD;
}

.left {
  width: 25%;
}

.middle {
  width: 50%;
  background: #EEE;
}

.right {
  width: 25%;
}

.left aside {
  background: green;
  color: white;
  transform: perspective(500px) rotateY(25deg);
}

.right aside {
  background: blue;
  color: white;
  transform: perspective(500px) rotateY(-25deg);
}

基本上，您必须检查您的代码结构并相应地更新定义。

注意不要将 html 元素与类混合。

如果您需要有关 CSS 选择器的更多信息，可以查看 W3 Schools 上的这篇文章。