css怎么设置图片定点旋转?

答案:4 悬赏:40 手机版

解决时间 2021-03-24 23:31

提问者网友：世勋超人
2021-03-24 03:24

css怎么设置图片定点旋转?

最佳答案

五星知识达人网友：酒者煙囻
2021-03-24 04:26

使用CSS3 transform 属性设置元素旋转。

定义和用法
　　transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法：transform: none|transform-functions;

可能值

实例旋转 div 元素：
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg);
}浏览器支持　

Internet Explorer 10、Firefox、Opera 支持 transform 属性。　　Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
　　Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
　　Opera 只支持 2D 转换。

全部回答

1楼网友：老鼠爱大米
2021-03-24 06:40

css搞定，然后选个时间：、
img:hover{
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
html：

2楼网友：山有枢
2021-03-24 05:12

以某个中心点旋转图片
var num=0;
function draw()
{
num+=1;
if(num==60)
num=1;
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.save();
//将坐标原点平移到当前图片所在的位置,width,height分别为图片的坐标,这个可以根据自己的需要进行更改
cxt.translate(width,height);
//将坐标原点平移到要中心点，这里是以图片的底部为中心点进行旋转13,62为图片本身的中心点
cxt.translate(13,62);
//每次旋转6度
cxt.rotate(num*(Math.PI/30));
cxt.translate(-13,-62);
//因为是以图片的底部作为中心点，所以这时候的图片位置在画布的原点上
cxt.drawImage(aimg,0,0);
cxt.restore();
}

3楼网友：封刀令
2021-03-24 04:50

这个需要使用css3 了
img:hover{
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transfomr:rotate(90deg);
}

不适用于ie9以下浏览器追问这个我知道，但是它是图片整体旋转，我需要的是他固定的点不动，图片向下掉掉下来，你能想象那种效果吗？，就是图片上面两个角被钉子固定在墙上！去掉其中一个钉子，图片向下旋转90度！我要的就是这种效果追答img:hover{
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
可以选择旋转点为左上角。。。。。。

我要举报

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

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