1、首先打开html文件编辑器，这里使用vscode新建一个html文档，文档中写入基本的html结构，然后插入img标签并插入一张图片，给img一个class属性：
2、然后在上方的head标签中的style标签设置样式，这里设置图片的宽度和高度并设置相对定位，然后设置图片的鼠标悬浮样式，其中设置动画的形式为3d以及设置图片3d旋转偏移的角度，添加一个动画，设置好延时即可：
3、最后打开浏览器，就会看到一个图片：
4、当鼠标移动上去，图片就会自动3d旋转了：
刷新网页可不能转哦，一刷新网页就全部重新加载了，但是css3 可以通过多张图片 排在一起 像flash里的单帧播放形式 通过改变background-position来实现图片连续播放。其实现在的css 3D动画都是将多张图片单帧保存下来 然后通过css改变图片或背景位置的。
如下：
<div id="aa"></div>
@-webkit-keyframes 'somename' {
0% { background-position: 0px}
49.9999% { background-position: 0px}
50% { background-position: -100px}
100% { background-position: -100px}
}
#aa{
width:500px
height:500px
display:block
background-image: url(somepic.png)
-webkit-animation-name: somename
-webkit-animation-duration: 0.2s
-webkit-animation-iteration-count: infinite
}
图片旋转可以用CSS3中的动画效果来做，CSS3中，允许使用 3D 转换来对元素进行格式化。示例代码如下：
<style>
*{margin:0padding:0}/*简单可以自定义，参照上面*/
body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, Systembackground-color:#FFF}
#imgg{animation:imgg 1s linear 0s infinite}
@keyframes imgg{0% {transform:rotateY(0deg)}25%{transform:rotateY(90deg)}50%{transform:rotateY(180deg)}75%{transform:rotateY(270deg)}100% {transform:rotateY(360deg)}}
</style>
<div id="demo">
<img src="图片地址" alt="" width="100" height="100" id="imgg">
</div>
