html5如何让图片3d旋转？

html-css09

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

图片旋转可以用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>

可以使用css3中的rotate实现

实际的旋转效果是这样：

rotate中的 60deg 表示按最原始的位置，顺时针旋转60°

w3school 里面有更详细用法，可以2D旋转、3D旋转

可以参考：网页链接

动画效果可以通过js改变rotate中传入的值来实现