如何解决如何将元素的变换原点放置在视口的中心
我正在尝试制作一个可以缩放和平移的网站。 目前我正在使用 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 举报,一经查实,本站将立刻删除。