CSS imageviewer：图像旋转（和缩放）

Question

我正在尝试在我的 React 项目中使用一个简单的图像查看器。有没有一种方法可以在不引用 JS 中 DOM 节点的当前维度的情况下实现旋转（理想情况下是缩放）？

到目前为止，我尝试了类似的方法（从我的 jsfiddle 中减少了 case/taken）：

function getTransform() {
    switch (rotation) {
    case 90: return { 
        transform: 'translateY(-100%) rotate(90deg)', 
      'transform-origin': 'bottom left'
     };
    case 180: return {
        transform: 'translate(100%, -100%) rotate(180deg)', 
      'transform-origin': 'bottom left'
    }
    case 270: return { 
        transform: 'translateX(-100%) rotate(270deg)', 
      'transform-origin': 'top right'
     };
     default: return {
        transform: 'none'
     }
  }
}

并将其作为样式应用于我的元素。不幸的是，这不起作用。虽然我可以使用 Y 的 100%/相对值（即 90 度有效，至少 180 度适用于 Y 轴），但我不能使用它来平移 X 轴 - 部分图像在屏幕外。

演示：https://jsfiddle.net/7huLa8e1/2/

有没有单独使用相对值的方法，或者我是否必须获取 DOM 节点并在绝对像素值中使用 width/height 才能完成这项工作？

Answer 1

如果我对你的问题理解正确，你的问题是图像以未指定的尺寸向右溢出容器。

我们需要解决这个问题。我的想法是让图像在容器内向右浮动。我们需要一个 clearfix 来保持它的大小正确。

我重做了 jquery 以与 css 类一起使用，因为这是修改子项（图像）的最简单方法

var rotation = 0;



function rotate(deg) {
 rotation = (360 + rotation + deg) % 360;
  $('#image-viewer').attr('class',  'rotate' + rotation);
}

$(function(){
$('#rotateLeft').click(
 function(event) {
   rotate(-90);
  }
);

$('#rotateRight').click(
 function(event) {
   rotate(90);
  }
);

});

#image-viewer {
  position: relative;
  cursor: pointer;
  border: solid red 2px;
}

.image-viewer-root {
  height: 100vh;
}

.image-viewer-viewport {
  height: 90%;
  overflow: auto;
}


.rotate90 {
  transform:  rotate(90deg) translate(0%, -100%);
  transform-origin: left top;
}

.rotate180 {
  transform: rotate(180deg);
  transform-origin: center center;
}

.rotate180 img {
  float: right;
}



.rotate270 {
  transform: translate(-100%, 0%) rotate(270deg);
  transform-origin: right top;
}

.rotate270 img {
  float: right;
}

.clearfix {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-viewer-root">
  <nav class="toolbar navbar navbar-dark bg-faded">
    <div class="nav navbar-nav">
      <button id="rotateLeft" class="btn nav-item">RotateLeft</button>
      <button id="rotateRight" class="btn nav-item">RotateRight</button>
    </div>
  </nav>
  <div class="image-viewer-viewport">
    <div id="image-viewer">
      <img src="https://sstatic.net/stackexchange/img/logos/so/so-logo.png?v=9c558ec15d8a">
      <div class="clearfix"></div>
    </div>
  </div>
</div>

CSS imageviewer：图像旋转（和缩放）

CSS imageviewer: Image rotation (and scaling)

javascript

css

css-transforms