react-zoom-pan-pinch
Version:
Zoom and pan html elements in easy way.
44 lines (43 loc) • 952 B
CSS
.wrapper {
position: relative;
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
overflow: hidden;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
margin: 0;
padding: 0;
transform: translate3d(0, 0, 0);
}
.content {
display: flex;
flex-wrap: wrap;
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
margin: 0;
padding: 0;
transform-origin: 0% 0%;
}
.content img {
pointer-events: none;
}
.infiniteGrid {
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(
circle,
rgba(0, 0, 0, 0.12) 1px,
transparent 1px
);
background-size: 20px 20px;
background-position: 0 0;
}