在Y轴上旋转文本

Question

在过去的几天里，我使用了CSS转换属性，我想找到一种方法，如下所示：

盒子都是普通的矩形盒子。我根本不知道从哪里开始。

根据要求：

body {
  margin: 0px;
  margin-left: 15%;
  overflow: hidden;
}
.skewed {
  margin: -1px;
  height: 300px;
  border: 4px solid black;
  width: 70%;
  float: left;
  overflow: hidden;
  transform: perspective(200px) rotateY(45deg);
}
.skewed > img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") blur(3px);
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%) blur(3px);
  /* Chrome 19+ & Safari 6+ */
  transition: 0.2s ease-in-out;
}
.skewed:hover > img {
  transform: scale(1.05);
  filter: none;
  -webkit-filter: grayscale(0%);
}

<div class="skewed">
  <img src="image001.jpg">
</div>
<div class="skewed">
  <img src="image002.jpg">
</div>
<div class="skewed">
  <img src="image003.jpg">
</div>
<div class="skewed">
  <img src="image004.jpg">
</div>

Answer 1

使用CSS 3d transforms非常简单。您可以使用transform:rotateY(xdeg);

旋转Y轴上的每个元素

以下是一个例子：

div {
  font-size: 2em;
  width: 7em;
  margin: 0 auto;
  padding: 0.1em 0;
  text-align: center;
  transform: perspective(500px) rotateY(30deg);
  background: teal;
}
div:nth-child(2n) {
  transform: perspective(500px) rotateY(-30deg);
  background: tomato;
}

<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>

请注意，您需要为浏览器支持添加供应商前缀。有关详细信息，请参阅canIuse