html - 从中心缩放 X 然后旋转 css

Question

如何在中心应用 scaleX 变换然后进行旋转？查看我的 CSS，我只是做了一个 transform: scaleX(-1); 来进行水平翻转。进行 180 度旋转时，因为我从中心旋转，翻转效果很好。

但是我不知道如何左右旋转(HFlipRoR HFlipRoL)。我尝试制作“HFlip RoR”类，但在那种情况下它只应用其中一种转换

这是我的代码片段:

.RoR {
  transform: translate(0, -100%) rotate(90deg);
  transform-origin: bottom left;
}
.RoL {
  transform: translate(-100%, 0%) rotate(-90deg);
  transform-origin: top right;
}
.R180 {
  transform: rotate(180deg);
}
.HFlip {
  transform: scaleX(-1);
}
.HFlipRoR {
  transform: scaleX(-1) translate(0, -100%) rotate(90deg);
  transform-origin: bottom left;
}
.HFlip180 {
  transform: scaleX(-1) rotate(180deg);
}

<img class="HFlipRoR" src="https://farm4.static.flickr.com/3010/4566263938_a56f24a24f.jpg">

Answer 1

如果我没记错的话，使用 image你已经提供了，我们可以模仿图像中的转换。将鼠标悬停在数字上将显示相应的图像。

$("#list li").hover(function() {
  $("img").hide();
  $("#_" + this.innerText).show();
}, function() {
  $("img").show();
});

#list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid silver;
  display: table;
}
#list li {
  padding: 5px;
  border-bottom: 1px solid silver;
}
#list li:last-child {
  border-bottom: 0;
}
#list li:hover {
  background-color: rgba(0, 0, 0, .1);
}
img {
  width: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .75;
  margin-top: 50px;
  margin-left: 200px;
}
#_2 {
  transform: scaleX(-1);
}
#_3 {
  transform: translate(0, 200%) scale(-1);
}
#_4 {
  transform: translate(0, 200%) scaleY(-1);
}
#_5 {
  transform: translate(-100%, 100%) rotate(90deg) scaleY(-1);
}
#_6 {
  transform: translate(-100%, 100%) rotate(90deg) scale(-1);
}
#_7 {
  transform: translate(100%, 100%) rotate(90deg) scaleX(-1);
}
#_8 {
  transform: translate(100%, 100%) rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

<img src="http://i1115.photobucket.com/albums/k544/akinuri/f.gif" id="_1" />
<img src="http://i1115.photobucket.com/albums/k544/akinuri/f.gif" id="_2" />
<img src="http://i1115.photobucket.com/albums/k544/akinuri/f.gif" id="_3" />
<img src="http://i1115.photobucket.com/albums/k544/akinuri/f.gif" id="_4" />
<img src="http://i1115.photobucket.com/albums/k544/akinuri/f.gif" id="_5" />
<img src="http://i1115.photobucket.com/albums/k544/akinuri/f.gif" id="_6" />
<img src="http://i1115.photobucket.com/albums/k544/akinuri/f.gif" id="_7" />
<img src="http://i1115.photobucket.com/albums/k544/akinuri/f.gif" id="_8" />