代码之家 › 专栏 › 技术社区 › Sajjan Sarkar

通过CSS旋转和放置图像270度不起作用

css-transforms css3 css html

Sajjan Sarkar · 技术社区 · 6 年前

我的代码似乎适用于除270以外的所有版本,在270中,它可以正确地旋转,但位置不正确。

请在下面找到我的问题的简单抽象:

代码:

HTML格式

<a href="#" id="myrotate">[ rotate ]</a>
<div style="border: 1px solid red;">
  <img id="myimage" src="http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF" style="border: 3px solid silver;" />
</div>

CSS格式:

.rot0 {
  transform-origin: left top;
}

.rot90 {
  transform: translateY(-100%) rotate(90deg);
  transform-origin: left bottom;
}

.rot180 {
  transform:rotate(180deg);  
}

.rot270 {
  transform: rotate(270deg) translateY(-148%);
    transform-origin: right top;
}

JS公司:

$("#myrotate").click(
  function(e) {
    var img = $("#myimage");
    if (img.hasClass("rot0"))
      img.removeClass("rot0").addClass("rot90");
    else if (img.hasClass("rot90"))
      img.removeClass("rot90").addClass("rot180");
    else if (img.hasClass("rot180"))
      img.removeClass("rot180").addClass("rot270");
    else if (img.hasClass("rot270"))
      img.removeClass("rot270").addClass("rot0");
    else
      img.addClass("rot90");
  }
);

MVCE公司: http://jsfiddle.net/d3g0x72t/

1 回复 | 直到 6 年前

duhaime 6 年前

看起来你真的想要:

.rot270 {
  transform: rotate(270deg) translateX(-100%);
  transform-origin: left top;
}

$("#myrotate").click(
  function(e) {
    var img = $("#myimage");
    if (img.hasClass("rot0"))
      img.removeClass("rot0").addClass("rot90");
    else if (img.hasClass("rot90"))
      img.removeClass("rot90").addClass("rot180");
    else if (img.hasClass("rot180"))
      img.removeClass("rot180").addClass("rot270");
    else if (img.hasClass("rot270"))
      img.removeClass("rot270").addClass("rot0");
    else
      img.addClass("rot90");
  }
);
//http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF
//http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg

.rot0 {
  transform-origin: left top;
}

.rot90 {
  transform: translateY(-100%) rotate(90deg);
  transform-origin: left bottom;
}

.rot180 {
  transform:rotate(180deg);  
}

.rot270 {
  transform: rotate(270deg) translateX(-100%);
  transform-origin: left top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a href="#" id="myrotate">[ rotate ]</a>
<div style="border: 1px solid red;">
  <img id="myimage" src="http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF" style="border: 3px solid silver;" />
</div>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前