<div class="ticket-visual_visual" id="ticket">
  <div class="left"></div>
  <div class="right"></div>
  <div class="ticket-visual-wrapper">
    コンテンツ
  </div>
</div>

body {
			background: #000;
			color: white;
			font-family: Arial, Helvetica, sans-serif;
		}

		* {
			box-sizing: border-box;
		}

		.ticket-visual_visual {
			padding: 5px;
			width: 650px;
			height: 320px;
			margin: 100px auto;
			position: relative;
			transition: all 300ms cubic-bezier(0.03, 0.98, 0.53, 0.99) 0s;
			/* border: 5px solid #fff; */
			background: linear-gradient(to right, #d25778, #ec585c, #e7d155, #56a8c6);
			border-radius: 20px;
		}

		.ticket-visual-wrapper {
			width: 100%;
			height: 100%;
			background: #000;
			border-radius: 15px;
		}

// ↓題材
// https://coliss.com/articles/build-websites/operation/css/gradient-borders-with-curves-and-3d-movement-in-css.html

		window.addEventListener("mousemove", e => {
			const ticketElm = document.getElementById("ticket")
			const { x, y, width, height } = ticketElm.getBoundingClientRect()
			console.log(ticketElm.getBoundingClientRect())
			const centerPoint = { x: x + width / 2, y: y + height / 2 }
			window.addEventListener("mousemove", e => {
				const degreeX = (e.clientY - centerPoint.y) * 0.1
				const degreeY = (e.clientX - centerPoint.x) * -0.1

				ticketElm.style.transform = `perspective(1000px) rotateX(${degreeX}deg) rotateY(${degreeY}deg)`
			})
		})