CSS imageviewer: вращение изображения (и масштабирование)

Question

Я пытаюсь иметь упрощенный просмотрщик изображений в моем проектном проекте. Есть ли способ реализовать вращение (и идеально масштабирование) без ссылки на текущие размеры узла DOM в JS?

До сих пор я пытался что-то вроде этого (пониженные случай/взят из моего 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' 
    } 
    } 
} 

и применить это как стили на моем элементе. К сожалению, это не работает. Хотя я могу использовать 100%/относительные значения для Y (т. Е. 90 градусов работает, 180 градусов работает по оси Y как минимум), я не могу использовать его для перевода оси X - части изображения за кадром.

Демо: https://jsfiddle.net/7huLa8e1/2/

Есть ли способ использовать относительные значения в одиночку или у меня есть, чтобы захватить узел DOM и использование ширины/высоты в абсолютных значениях пикселей, чтобы сделать эту работу?

Answer 1

Если я правильно понимаю ваш вопрос, ваша проблема заключается в том, что изображение переполняет контейнер в нужном порядке в неуказанном размере.

Нам нужно обойти это. Моя идея - поплыть прямо к изображению внутри контейнера. нам понадобится clearfix, чтобы он не делал правильный размер.

Я переделано на JQuery для работы с классами CSS, так как это самый простой способ изменить ребенка (изображение)

var rotation = 0; 
 

 

 

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

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

 
$('#rotateRight').click(
 
\t function(event) { 
 
    \t 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>