.atropos {
position: relative;
display: block;
perspective: 1200px;
transform: translate3d(0, 0, 0);
}
.atropos-rotate-scroll-x,
.atropos-rotate-scroll-y,
.atropos-rotate-touch {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.atropos-rotate-touch-scroll-y {
touch-action: pan-y;
}
.atropos-rotate-touch-scroll-x {
touch-action: pan-x;
}
.atropos-rotate-touch {
touch-action: none;
}
.atropos-rotate,
.atropos-scale {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition-property: transform;
display: block;
}
.atropos-highlight,
.atropos-shadow {
position: absolute;
pointer-events: none;
transition-property: transform, opacity;
display: block;
opacity: 0;
}
.atropos-shadow {
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.atropos-highlight {
left: -50%;
top: -50%;
width: auto;
height: auto;
z-index: 0;
}
.atropos-rotate {
position: relative;
}
.atropos-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: translate3d(0, 0, 0);
display: block;
}
.atropos-active {
z-index: 1;
}
.atropos-active .atropos-shadow {
opacity: 1 !important;
}
::slotted([data-atropos-offset]),
[data-atropos-offset] {
transition-property: transform;
}
[data-atropos-opacity] {
transition-property: opacity;
}
::slotted([data-atropos-offset][data-atropos-opacity]),
[data-atropos-offset][data-atropos-opacity] {
transition-property: transform, opacity;
}