Image CSS3图像旋转

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

我不需要的一个例子是：

-webkit变换：旋转（-29度）；
-moz变换：旋转（-29度）；
-ms变换：旋转（-29度）；
-o变换：旋转（-29度）；
变换：旋转（-29度）；
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）；

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

---

您希望修改图像的“透视”

如果要更新与示例中的一个图像相似的图像的外观，则需要混合使用

rotateY（）

和

透视图

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

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

小猫先生{
-webkit变换：透视（1000px）旋转（45度）；
}

查看这个JSFIDLE：

还值得一看这篇CSS技巧文章：

---

至于基于滚动或沿着这些线条修改图像的透视图，您将需要一些javascript计算来生成

透视图

和

旋转值。
您的意思是这样的吗

左边的透视图：

-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 );


由于
perspective
和
rotate
，您可以在此处阅读更多有关的信息，例如：。
关键是使用
perspective
CSS3 transform属性。for透视图给出了如何使用此属性的良好定义

透视图：

perspective CSS属性确定z=0平面和用户之间的距离，以便为三维定位元素提供一些透视。z>0的每个3D元素变大；每一个3D元素都有很好的效果！只是好奇：为什么这里需要
position:relative
！从代码片段和示例中删除：）@user3547811很简单，就像这样：
它不起作用，我在这里上传了我的网站文件，这里是一个病毒扫描程序。很抱歉，我花了这么长时间才接受它，我在乱搞代码以使其完美！非常感谢！如果这些回答中有一个帮助了您，请不要忘记选择答案！
<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 );
}