Welcome to CODEBOX! (Branch 2207) (Copy 2219)

✨ นายกฤติน กลิ่นแก้ว

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			box-sizing: border-box;
			padding: 0;
			margin: 0;
			outline: none;
		}
		body{
			font-family: Open-Sans;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			overflow: hidden;
			background: #000;
			background-size: cover;
		}
		.mainbox{
			position: relative;
			width: 500px;
			height: 500px;
		}
		.mainbox:after{
			position: absolute;
			content: '';
			width: 120px;
			height: 120px;
			background: url('') no-repeat;
			background-size: 120px;
			left: -32px;
			top: 50%;
			transform: translateY(-50%) rotate(90deg);
		}
		.box{
			width: 100%;
			height: 100%;
			position: relative;
			border-radius: 50%;
			border: 10px solid #fff;
			overflow: hidden;
		}
		span{
			width: 50%;
			height: 50%;
			display: inline-block;
			position: absolute;
		}
		.span1{
			clip-path: polygon(0 92%, 100% 50%, 0 8%);
			background-color: #ffeb3b;
			top: 120px;
			left: 0;
		}
		.span2{
			clip-path: polygon(100% 92%, 0% 50%, 100% 8%);
			background-color: #e91e63;
			top: 120px;
			right: 0;
		}
		.span3{
			clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
			background-color: #4caf50;
			bottom: 0;
			left: 120px;
		}
		.span4{
			clip-path: polygon(50% 100%, 92% 0, 8% 0);
			background-color: #3f51b5;
			top: 0;
			left: 120px;
		}
		.box2{
			width: 100%;
			height: 100%;
			transform: rotate(-135deg);
		}
		.box2 .span1{
			clip-path: polygon(0 92%, 100% 50%, 0 8%);
			background-color: #ffeb3b;
			top: 120px;
			left: 0;
		}
		.box2 .span2{
			clip-path: polygon(100% 92%, 0% 50%, 100% 8%);
			background-color: #e91e63;
			top: 120px;
			right: 0;
		}
		.box2 .span3{
			clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
			background-color: #4caf50;
			bottom: 0;
			left: 120px;
		}
		.box2 .span4{
			clip-path: polygon(50% 100%, 92% 0, 8% 0);
			background-color: #3f51b5;
			top: 0;
			left: 120px;
		}
		img{
			width: 70px;
			height: 70px;
			line-height: 65px;
			border-radius: 50%;
			font-size: 26px;
			text-align: center;
			background-color: #fff;
			position: absolute;
			top: var(--top);
			left: var(--left);
			bottom: var(--bottom);
			right: var(--right);
			transform: translate(-50%, -50%);
			box-shadow: inset 0 3px 3px 0 #717171;
		}
		.spin{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 120px;
			height: 120px;
			border-radius: 50%;
			border: 4px solid #fff;
			background-color: #ff5722;
			color: #fff;
			box-shadow: 0 5px 20px #000;
			font-weight: bold;
			font-size: 22px;
			cursor: pointer;
			overflow: hidden;
		}
		.spin:active{
			width: 130px;
			height: 130px;
			font-size: 20px
		}
		.spin img{
			left: -2px;
			top: -2px;
			width: 130px;
			height: 130px;
			animation: ta 5s linear infinite;
			background: transparent;
		}
		@keyframes ta {
			from{
				transform: rotateZ(0deg);
			}
  			to{
  				transform: rotateZ(360deg);
  			}
		}
	</style>
</head>
<body>
	<div class="mainbox">
		<div id="boxxes" class="box">
			<div class="box1">
				<span class="span1"><img src="https://i.imgur.com/YQMTwYP.png" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span>
				<span class="span2"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span>
				<span class="span3"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span>
				<span class="span4"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span>
			</div>
			<div class="box2">
				<span class="span1"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span>
				<span class="span2"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span>
				<span class="span3"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span>
				<span class="span4"><img src="img.jpg" style="--top: 50%;--left: 50%;--bottom: 0;--right: 0;" alt=""></span>
			</div>
		</div>
		<button class="spin"><img src="https://imgur.com/LVsV10v.png" alt="" onclick="myfunction()"></button>
	</div>
<script>
  myfunction(){
	var x = 1024;
    var y = 9999;
    var mum = Math.floor(Math.random()*(x-y)) + y;
    document.getElementById('boxxes').style.transform = "rotate(${mum}deg)"";
  }
  </script>
</body>
</html>