html5如何让图片3d旋转?
发布网友
共2个回答
热心网友
图片旋转可以用CSS3中的动画效果来做，CSS3中，允许使用 3D 转换来对元素进行格式化。
示例代码如下：
<style>
*{margin:0;padding:0;}/*简单可以自定义，参照上面*/
body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, System;background-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中的动画效果来做，CSS3中，允许使用 3D 转换来对元素进行格式化。
示例代码如下：
<style>
*{margin:0;padding:0;}/*简单可以自定义，参照上面*/
body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1"，"\5B8B\4F53"， sans-serif， Arial， System;background-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>
