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

答案:6 悬赏:50 手机版

解决时间 2021-03-21 05:29

提问者网友：雨不眠的下
2021-03-20 22:43

就是鼠标移动那那图片就会跟着鼠标走还有一个效果是进入网站后图片会自动旋转

最佳答案

五星知识达人网友：duile
2019-05-12 03:24

1. css3 的transform属性允许我们旋转、缩放和移动元素。可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。
2. CSS代码如下：
.rotate{
    -ms-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
}　　
3. 浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

全部回答

1楼网友：白昼之月
2020-09-30 01:26

滑过时旋转吗？旋转问题： -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; 这是渐变效果

2楼网友：行雁书
2020-02-16 02:46

通过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>

3楼网友：拜訪者
2019-12-16 00:15

1. css3 的transform属性允许我们旋转、缩放和移动元素。

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息