如何使用 css3 转换来转换页面中的元素？ [关闭]答案

【问题标题】：How to transform an element in a page using css3 transforms? [closed]如何使用 css3 转换来转换页面中的元素？ [关闭]
【发布时间】：2013-12-17 16:21:44
【问题描述】：

我有一个如下所示的 div：

+---------+
|         |
+---------+

我想把它改成这样：

  +---------+
 /           \
+-------------+

我该怎么做？

【问题讨论】：

你也要换视角吗？

标签： css

【解决方案1】：

如果您想使用 CSS 转换，see here

HTML

<div class='trapezoid'></div>

CSS

.trapezoid {
  display: inline-block;
  overflow: hidden;
  margin: 0 3em;
  /**outline: solid 1px;/**/
  width: 10em;
  height: 10em;
  transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.trapezoid:before {
  display: block;
  background: red;
  content: '';
}
.trapezoid:before {
  width: 20em; height: 3em;
  transform: rotate(-45deg) translate(-4.142em, -2.6em);
  -webkit-transform: rotate(-45deg) translate(-4.142em, -2.6em);
}

为了更简单的实现，see this fiddle

HTML

<div></div>

CSS

div {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    margin-top:30px;   
    width: 100px;
}

【讨论】：

你没有使用 CSS3 转换。
OP要求对其进行转换，而不是为了具体使用transform。
问题是：“如何使用css3转换来转换页面中的元素？”。但我同意你的静态 CSS 方法。
更新了一种更复杂的方法来实现相同的效果，使用 transform :)
不能反驳 :)

【解决方案2】：

如果“如何转换”是指如何在 x 轴上旋转应用透视以实现深度，那么您可以使用 CSS3 transform 的 perspective 和 rotate3d 来实现：

Running example

HTML

<div class="box">
    Hover me    
</div>

CSS

.box{
    width: 300px;
    height: 100px;
    background: silver;
    font-size: 4em;
    margin: 100px;
}

.box:hover{
    transform : perspective(400px) rotate3d(1, 0, 0, 50deg);
}

你可能也想read this other answer。

【讨论】：

上帝保佑你……这正是我要找的！

【解决方案3】：

Div 是方形元素，因此您不能将 div 的实际边界框转换为梯形。但是，您可以使用边框和框阴影来实现类似的视觉效果。请参阅CSS3 matrix3d rectangle to trapezoid transformation 以获得一些潜在的帮助。

【讨论】：