0

我正在尝试制作一个可以缩放和平移的网站。目前我正在使用panzoom 包，但用户应该能够围绕他们的屏幕中心旋转场景内容。

我知道 transform-origin 属性是如何工作的，但我似乎无法弄清楚如何相对于视口更改它。

例子

这是我正在研究的 JSFiddle：https ://jsfiddle.net/jsrhkom4/28/ 。

HTML

<div class="scene">
  <div class="scene__content">
    <img src="https://picsum.photos/id/237/500/500">
    <img src="https://picsum.photos/id/237/500/500">
    <img src="https://picsum.photos/id/237/500/500">
    <img src="https://picsum.photos/id/237/500/500">
  </div>
</div>

<div class="bar">
  <div class="js-turn-left">Rotate left</div>
  <div class="js-turn-right">Rotate right</div>
</div>

CSS

.scene__content {
  transition: transform 1s ease-in-out;
  max-width: fit-content;
  max-height: fit-content;
  
  display:grid;
  grid-template-columns: 200px 200px;
  grid-row: auto auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  
  img {
    width: 100%;
    
    &:nth-child(1) {
      transform: rotate(180deg);
    }
    
    &:nth-child(2) {
      transform: rotate(270deg);
    }
    
    &:nth-child(3) {
      transform: rotate(90deg);
    }
  }
}

.bar {
  position: fixed;
  z-index: 9;
  bottom:0;
  left:0;
  right:0;
  padding: 15px 0;
  background-color:red;
  display:flex;
  justify-content: space-around;
  align-items:center;
  
  div {
    padding: 15px 30px;
    background-color: crimson;
    cursor: pointer;
  }
}

JS

const el = document.querySelector('.scene');
const scene = panzoom(el, {
  maxZoom: 1.5,
  minZoom: 0.5,
  smoothScroll: true,
  bounds: true
});

const turnLeft = document.querySelector('.js-turn-left');
const turnRight = document.querySelector('.js-turn-right');
const content = document.querySelector('.scene__content');
let angle = 0;

turnLeft.addEventListener('click', () => {
    angle-=45;
    content.style.transform = "rotate(" + angle + "deg)";
});
turnRight.addEventListener('click', () => {
    angle+=45;
    content.style.transform = "rotate(" + angle + "deg)";
});

演示：https ://jsfiddle.net/jsrhkom4/28/show 。

提前致谢！

4

0 回答 0