如果要实现下面的图片旋转效果，使用css该如何实现呢？
很多就会想直接使用图片旋转就是了。
事实上css的旋转和我们想象中是完全不一样的，直接使用：transform: rotateY(10deg)，想象中应该是左边高度比右边高度大一些的视图效果和日常生活中的视角应该是一样的，但是实际却是类似于宽度缩小的效果，没有3d的视角。
很明显单独使用transform: rotateY(10deg)是不具备3d效果的，如果想让图片看上去有那么点3d的效果就需要一个属性：perspective。
这个属性允许你以3D的视角查看元素。
那么我们为图片加上这个属性试试：
感觉就不是那么生动，没有那个3d的感觉，如何让图片有那种感觉呢？
手机拍视频的时候，手机左右转动屏幕左右会加入或者是减少一些景物到屏幕中，那么按照这个思路，图片旋转的时候我们将图片左右动一下，加上之前的3d视角，那种3d的味道是不是就出来啦？
完整代码：
html：<div> <img src="url" alt=""></div> css：div { transform: perspective(400px) rotateY(10deg); transition: all 0.3s ease-in-out; &:hover { transition: all 0.3s ease-in-out; transform: perspective(400px) rotateY(0deg); img { transition: all 0.3s ease-in-out; margin-left: 0; } } img { transition: all 0.3s ease-in-out; margin-left: -30px; }}
这只是简单的实现代码，具体尺寸和如何使其更顺滑需要对照设计进行调试！
这张图其实不是很适合展示，如果能找到一个合适的图片，加上合适的场景3d的感觉会更明显一点
