网页设计中怎么实现图片旋转

就是鼠标移动那那图片就会跟着鼠标走还有一个效果是进入网站后图片会自动旋转... 就是鼠标移动 那 那图片就会跟 着鼠标走 还有一个效果是进 入网站后图片会自动旋转 展开
 我来答
7个回答
#热议# 普通体检能查出癌症吗？
一梦中
推荐于2017-10-04 · 知道合伙人互联网行家
一梦中
知道合伙人互联网行家
采纳数：3184 获赞数：4841
从事15年计算机网络、数码电子科技、计算机教育等相关行业。现任公司技术主管。

向TA提问 私信TA
展开全部

  1. css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。   

  2. CSS代码如下：

    .rotate{

        -ms-transform:rotate(90deg); /* IE 9 */

        -moz-transform:rotate(90deg); /* Firefox */

        -webkit-transform:rotate(90deg); /* Safari and Chrome */

        -o-transform:rotate(90deg); /* Opera */

    }　　

  3. 浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

已赞过 已踩过<
你对这个回答的评价是？
评论 收起
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼word文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景... 点击进入详情页
本回答由博思aippt提供
 高效IT不挨踢
2015-05-28 · TA获得超过3716个赞
知道大有可为答主
回答量：7193
采纳率：35%
帮助的人：2112万
我也去答题访问个人页
展开全部
通过HTML5代码，实现让图片围绕中心点旋转。
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function fly(){
var myImage=document.getElementByIdx_x_x("myCanvas");
var cxt = myImage.getContext("2d");
var img = new Image();
img.src="images/0.gif";

//执行旋转的特效
function spfly(){
cxt.drawImage(img,400,700);
cxt.translate(-80,60); //中心点
cxt.rotate(-0.1);
//clearInterval(timer);
}

var timer =setInterval(spfly,60);
}
</script>
</head>
<body >
<section >
<button onClick=" fly();">开始</button>
<canvas id="myCanvas" width="1300" height="1000">
</canvas>

<section>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
十里画廊翼
2015-09-06 · TA获得超过462个赞
知道答主
回答量：95
采纳率：0%
帮助的人：47.6万
我也去答题访问个人页
展开全部
图片旋转是属于css3的功能。css3用于控制网页布局和样式，相对于css以前的版本，增加了很多的新特性。其中重点是动画、过渡、3d、2d、图片旋转、文字特效等等。
用于控制旋转的属性是
img{
transform:rotate(30deg);
}

30deg表示旋转的度数。
具体参考：http://www.w3school.com.cn/css3/index.asp
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
m3664274
2015-08-23 · TA获得超过2264个赞
知道大有可为答主
回答量：2542
采纳率：50%
帮助的人：894万
我也去答题访问个人页
展开全部
<!--以下是图片旋转代码-->
<SCRIPT language=JavaScript>
var IMGArray = new Array(5);
var TXTArray = new Array(5);
var TheIMGIndex=0;
var garTransitions = new Array(10);
var speed = 5000;
garTransitions[0] = "RandomDissolve()";
garTransitions[1] = "Iris(irisStyle='star', motion='out')";
garTransitions[2] = "Iris(irisStyle='diamond', motion='in')";
garTransitions[3] = "Iris(irisStyle='cross', motion='out')";
garTransitions[4] = "Iris(irisStyle='circle', motion='in')";
garTransitions[5] = "Iris(irisStyle='plus', motion='in')";
garTransitions[6] = "Barn(orientation='vertical', motion='in')";
garTransitions[7] = "Barn(orientation='vertical', motion='out')";
garTransitions[8] = "Barn(orientation='horizontal', motion='in')";
garTransitions[9] = "Barn(orientation='horizontal', motion='out')";
function IMGTXTChange(INC_Index)
{
var INCAOBJ,NCTDOBJ;
for(var I=0;I<5;I++)
{
INCAOBJ=eval("document.all.ChangeA" + I);
INCTDOBJ=eval("document.all.ChangeTD" + I);
if (INC_Index==I)
{
TheIMGIndex=I;
INCTDOBJ.style.backgroundColor='#0066ff';
INCAOBJ.style.color='#ffffff';
}
else
{
INCTDOBJ.style.backgroundColor='#333333';
INCAOBJ.style.color='#ffffff';
}
}

var INCImage=document.all.TheChangeIMG;
var FilterStr="progid:DXImageTransform.Microsoft." + garTransitions[INC_Index+1];
INCImage.style.filter = FilterStr;
INCImage.filters.item(0).Apply();
INCImage.filters.item(0).Play(2.0);
var TheTrunImage=new Image;TheTrunImage.src=IMGArray[INC_Index];
document.all.TheChangeIMG.src=TheTrunImage.src;
//document.all.ChangeTXTDIV.innerHTML=TXTArray[INC_Index];
}

IMGArray[0]="image/1.JPG";
IMGArray[1]="image/2.JPG";
IMGArray[2]="image/3.JPG";
IMGArray[3]="image/4.JPG";
IMGArray[4]="image/5.JPG";

function SwitchPiture()
{
TheIMGIndex++;
if (TheIMGIndex>4){TheIMGIndex=0}
IMGTXTChange(TheIMGIndex);
TimeTurn=setTimeout("SwitchPiture()",speed);
}

function MouseOver(INC_OBJ)
{
INC_OBJ.style.color='#990000';
INC_OBJ.style.textDecoration='underline';
}

function MouseOut(INC_OBJ)
{
INC_OBJ.style.color='#000000';
INC_OBJ.style.textDecoration='none';
}

// - 控制自动播放
function AutoPlay() {
speed = 3000;
SwitchPiture();
}
// - \控制自动播放

window.onload = function() {
AutoPlay();
}
</SCRIPT>
放到<head>之间

<DIV
style="BORDER-RIGHT: #0066ff 1px solid; BORDER-TOP: #0066ff 1px solid; BORDER-LEFT: #0066ff 1px solid; WIDTH: 307px; BORDER-BOTTOM: #0066ff 1px solid; POSITION: relative; HEIGHT: 100%; BACKGROUND-COLOR: #ffffff">
<DIV
style="BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; WIDTH: 307px; BORDER-BOTTOM: #ff0000 0px solid; HEIGHT: 173px; BACKGROUND-COLOR: #0000ff"><img
id=TheChangeIMG height=220 src="image/0.jpg"
width=307 name=TheChangeIMG></DIV>
<DIV
style="LEFT: 0px; WIDTH: 100%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 18px; BACKGROUND-COLOR: transparent; TEXT-ALIGN: right">
<TABLE style="FONT-SIZE: 12px; HEIGHT: 18px; TEXT-ALIGN: center"
cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD id=ChangeTD0 style="BACKGROUND-COLOR: #000000" width=22
name="ChangeTD0"><A id=ChangeA0
style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #ffffff; TEXT-DECORATION: underline"
onclick=IMGTXTChange(0) name=ChangeA0>1</A></TD>
<TD style="BACKGROUND-COLOR: #ffffff" width=1></TD>
<TD id=ChangeTD1 style="BACKGROUND-COLOR: #000000" width=22
name="ChangeTD1"><A id=ChangeA1
style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #ffffff; TEXT-DECORATION: underline"
onclick=IMGTXTChange(1) name=ChangeA1>2</A></TD>
<TD style="BACKGROUND-COLOR: #ffffff" width=1></TD>
<TD id=ChangeTD2 style="BACKGROUND-COLOR: #000000" width=22
name="ChangeTD2"><A id=ChangeA2
style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #ffffff; TEXT-DECORATION: underline"
onclick=IMGTXTChange(2) name=ChangeA2>3</A></TD>
<TD style="BACKGROUND-COLOR: #ffffff" width=1></TD>
<TD id=ChangeTD3 style="BACKGROUND-COLOR: #000000" width=22
name="ChangeTD3"><A id=ChangeA3
style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #ffffff; TEXT-DECORATION: underline"
onclick=IMGTXTChange(3) name=ChangeA3>4</A></TD>
<TD style="BACKGROUND-COLOR: #ffffff" width=1></TD>
<TD id=ChangeTD4 style="BACKGROUND-COLOR: #000000" width=22
name="ChangeTD4"><A id=ChangeA4
style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #ffffff; TEXT-DECORATION: underline"
onclick=IMGTXTChange(4)
name=ChangeA4>5</A></TD></TR></TBODY></TABLE></DIV></DIV>
放到表格中;自己再修改一下图片路径!
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
百度网友bfcbad5
2015-09-26 · TA获得超过567个赞
知道小有建树答主
回答量：826
采纳率：100%
帮助的人：203万
我也去答题访问个人页
展开全部
滑过时旋转吗？

旋转问题：
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);

定位问题：
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);

前提是要有：

transition-property: all 0.3s ease;
transition-duration: 1s;
这是渐变效果
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 更多回答（5）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

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

类别

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

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式