html5如何让图片3d旋转?

html-css022

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中传入的值来实现