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

您正在修改图片的“透视图”。

如果您想要更新与您的示例中的某个图片类似的图片外观，那么您将希望混合使用rotateY()和perspective。

<img class="kitten" src="http://placekitten.com/200/200"/>

.kitten {
    -webkit-transform: perspective( 1000px ) rotateY( 45deg );
}

看看这个jsfiddle： http://jsfiddle.net/stat30fbliss/y2j4x/2/

另外值得查看这篇CSS诀窍文章： http://css-tricks.com/almanac/properties/p/perspective/

至于根据滚动或某些内容修改图像的视角，您需要进行一些javascript计算，以产生perspective和rotateY值。

Answer 2

你的意思是这样的吗？

左侧透视：

-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。

Answer 3

关键是使用perspective CSS3转换属性。 MDN Docs for perspective可以很好地定义如何使用此属性

<强> 视角：
透视CSS属性确定z = 0平面与用户之间的距离，以便为3D定位元素提供一些透视图。 z> 0的每个3D元素变大; z＆lt; 0的每个3D元素变小。效果的强度取决于此属性的值。

基本上，透视值越小（即观察者越接近DOM元素），转换效果越大（例如rotateX）

这是 fiddle ，显示了一些3D变换。您还应该查看这篇精彩的文章，该文章演示了您可以使用CSS3 3D变换进行的几种不同的转换： An Introduction to CSS 3-D Transforms

给出以下HTML：

<div class="rotate-left"></div>
<div class="rotate-up"></div>
<div class="rotate-right"></div>

您希望为元素提供以下属性：

.rotate-left {
    -webkit-transform: perspective( 500px ) rotateY( 35deg );
    -moz-transform: perspective( 500px ) rotateY( 35deg );
    -ms-transform: perspective( 500px ) rotateY( 35deg );
    -o-transform: perspective( 500px ) rotateY( 35deg );
    transform: perspective( 500px ) rotateY( 35deg );
}

.rotate-right {
    -webkit-transform: perspective( 500px ) rotateY( -35deg );
    -moz-transform: perspective( 500px ) rotateY( -35deg );
    -ms-transform: perspective( 500px ) rotateY( -35deg );
    -o-transform: perspective( 500px ) rotateY( -35deg );
    transform: perspective( 500px ) rotateY( -35deg );
}

.rotate-up {
    -webkit-transform: perspective( 500px ) rotateX( 35deg );
    -moz-transform: perspective( 500px ) rotateX( 35deg );
    -ms-transform: perspective( 500px ) rotateX( 35deg );
    -o-transform: perspective( 500px ) rotateX( 35deg );
    transform: perspective( 500px ) rotateX( 35deg );
}

CSS3图像旋转

3 个答案: