{ angle = (angle + ad) % 360 }, 100);
if (dragging) {
x = $event.clientX - offsetX;
y = $event.clientY - offsetY; }"
@mouseleave="ad *= 0.9"
@mousedown="
dragging = true;
offsetX = $event.clientX - x;
offsetY = $event.clientY - y; "
@mouseup="dragging = false"
:style="`
display: flex;
position: relative;
align-items: center;
justify-content: center;
user-select: none;
//pointer-events: auto;
background-color: blue;
border: 1px solid white;
width: 500px;
height: 300px;
font-size: calc(3vw + 4vh);
font-weight: bold;
color: white;
text-align: center;
white-space: pre-line;
backface-visibility: visible;
transform-style: preserve-3d;
transform: rotateY(${angle}deg);
left: ${x}px;
top: ${y}px;
cursor: ${dragging ? 'grabbing' : 'grab'}; `"
x-text="`AlpineJS \n Drag'n'Rotate \n ${Math.round(angle)}deg`"
>