在 Y 轴上旋转文本答案

【问题标题】：Rotate text on th Y axis在 Y 轴上旋转文本
【发布时间】：2017-02-14 03:34:54
【问题描述】：

在过去的几天里，我玩了一点 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>

【问题讨论】：

请包含您尝试过的内容...至少包含这些框的 html 和基本 css。
这些框与 GIMP 放在一起，我尝试了几乎所有的转换属性，但没有一个能引导我得到这个结果，即使是组合，所以如前所述，我不知道从哪里开始。
从基本的 html 和 CSS 开始制作这些盒子。
对不起，您似乎没有理解我的问题。我只想知道我应该使用哪个转换属性。

标签： html css css-shapes css-transforms

【解决方案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 了解更多信息

【讨论】：