html5如何让图片3d旋转

html-css021

html5如何让图片3d旋转,第1张

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

}