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 .