javascript - CSS图像查看器: Image rotation (and scaling)

Question

我试图在我的 react 元素中拥有一个简单的图像查看器。 有没有一种方法可以在不引用 JS 中 DOM 节点当前尺寸的情况下实现旋转(理想情况下是缩放)？

到目前为止，我尝试了这样的方法(减少大小写/取 self 的 jsfiddle):

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 节点并使用绝对像素值中的宽度/高度才能完成此工作？

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>