2

本质上，我需要让我的div变形像这个盒子的顶部一样定位（忽略半径边界、徽标、渐变等）

为此，我需要

  1. 将元素旋转到适当的角度，我知道如何使用transform:rotate(45deg). 这里的例子。这样做的问题是没有深度，它只是看起来像一个旋转的正方形，因为它就是这样。我希望它看起来像一架可以设置某些东西的飞机
  2. 在元素上添加深度感知，我也知道如何使用Craig Buckler 的方法来做到这一点。这里的例子
  3. 同时结合元素上的两种效果。这是我似乎无法正确的部分

我的基本代码

/* HTML */
<div id='square'></div>

/* CSS (without any transforms) */
#square {
    width:150px;
    height:150px;
    background:black;
    position:absolute;
    top:50%; left:50%;
    margin-left:-75px;
    margin-top:-75px;
}

我想我可以通过简单地将两者结合起来，使用

transform: rotate(45deg) perspective(300px) rotateX(25deg);

但我发现事实并非如此。这里的例子。这个问题是它仍然rotateX基于元素的原始方向，而不是旋转版本。因此，它没有适当的效果

我认为如果我将 应用于容器元素，我可以考虑旋转角度45deg，但这也无济于事。这里的例子rotateXrotate(45deg)

我已经尝试过这些方法的变体，但（当然）还没有得到我想要的效果

你知道我怎样才能正确地达到这个效果吗？

4

1 回答 1

2

正确的变换是

perspective(300px) rotateX(25deg) rotate(45deg);

您希望元素始终面向您的平面，因此首先您在 X 中旋转。这会设置一个底部靠近您而顶部远离您的平面，您不希望这样平面旋转，所以你不能在它之前放置一个旋转。

一旦你设置了这个平面，然后，在它里面，你旋转 div。

也许这fiddle会让它更清楚，悬停 div 以查看旋转平面。

于 2013-11-14T06:22:51.310 回答