image - CSS3图像旋转

Question

我想旋转一个图像，但我找不到我需要的方法，下图将给出一个更好的例子。我知道这是一张 YouTube 图片，但它是我能找到的最接近我所说内容的图片!

我不需要的例子如下:

-webkit-transform: rotate(-29deg);
   -moz-transform: rotate(-29deg);
    -ms-transform: rotate(-29deg);
     -o-transform: rotate(-29deg);
        transform: rotate(-29deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

它更像是图像深度。这可能吗？如果可能，我将如何获得效果？

Image link

Answer 1

你的意思是这样的？

左侧视角:

-webkit-transform: perspective( 300px ) rotateY( 45deg );
-moz-transform: perspective( 300px ) rotateY( 45deg );
-ms-transform: perspective( 300px ) rotateY( 45deg );
-o-transform: perspective( 300px ) rotateY( 45deg );
transform: perspective( 300px ) rotateY( 45deg );

右侧视角:

-webkit-transform: perspective( 300px ) rotateY( -45deg );
-moz-transform: perspective( 300px ) rotateY( -45deg );
-ms-transform: perspective( 300px ) rotateY( -45deg );
-o-transform: perspective( 300px ) rotateY( -45deg );
transform: perspective( 300px ) rotateY( -45deg );

DEMO

感谢 perspective 和 rotate，魔法正在发生，您可以在这里阅读更多示例:https://developer.mozilla.org/en-US/docs/Web/CSS/perspective .