问题描述
我正在尝试制作一个可以缩放和平移的网站。 目前我正在使用 panzoom package,但用户应该能够围绕屏幕中心旋转场景内容。
我知道 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。
提前致谢!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)