Question

我正在整理一个左侧有大图像的网页，我希望它看起来远离观众。我知道转换函数不具备它的能力。有没有办法只使用CSS来重建图像？如果没有，是否有一些语言的扩展，我可以安全地（即以跨浏览器的方式）用于以编程方式创建此效果？作为参考，作为视觉效果的梯形失真看起来像这样：Keystone diagram。不与歪斜相同，它是图像失真，而不是裁剪。

Answer 1

听起来你正在寻找具有视角的轴向旋转。假设你有两个嵌套的div，＃back和#fore。以下CSS将实现该效果。另见http://jsfiddle.net/4j8pn/6/。（顺便说一下，-webkit-transform能够进行任何3D转换。）

<body>
  <div id="back">
    <div id="fore">
      <img src="image_to_tilt.png"/>
    </div>
  </div>
</body>

<style>
  #back {
    margin:25px;
    width:300px;
    height:200px;
    background-color:#555;
    /* pull the viewer back; without this the div will look flat */
    -webkit-perspective: 1000px;
  }

  #fore {
    width:300px;
    height:200px;
    background-color:#999;
    /* set origin to upper left (default is center) to get desired look */
    -webkit-transform-origin: 0 0 0;
    /* rotateY tilts the div like a door, rotateX tilts it like an awning */
    -webkit-transform: rotateY(35deg);
  }
</style>

你能用纯css键入图像吗？

1 个答案: