html5如何让图片3d旋转?

 我来答
创业者李孟
高粉答主

2016-01-18 · 数码领域创作者
个人认证用户
创业者李孟
采纳数:7947 获赞数:39410

向TA提问 私信TA
展开全部
图片旋转可以用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>
手机用户38219
2015-09-15 · 超过55用户采纳过TA的回答
知道答主
回答量:115
采纳率:100%
帮助的人:104万
展开全部
图片旋转可以用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>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式