3D旋转骰子效果-优快云博客

本文链接：https://blog.youkuaiyun.com/Shirley_0513/article/details/103616547

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			div{
				width:200px;
				height:200px;
				position:absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
				margin:auto;
				transform-style: preserve-3d;		
				transform:rotate3d(1,1,1,30deg);
				animation:animationName 20s infinite linear;				
			}		
				@keyframes animationName{
				to{transform: rotate3d(1,1,1,360deg);}
			}
			
			p{
				position: absolute;
				height:200px;
				width:200px;			
			}		
			p:nth-child(1){background:yellow;}
			p:nth-child(2){background:orange;}
			p:nth-child(3){background:red;}
			p:nth-child(4){background:blue;}
			p:nth-child(5){background:white;}
			p:nth-child(6){background:green;}
			
			div:hover p:nth-child(1){					
				transform:rotateX(90deg) translateZ(100px) ;												
			}
			div:hover p:nth-child(2){		
				transform:rotateX(90deg) translateZ(-100px) ;						
			}
			div:hover p:nth-child(3){
				transform:rotateY(90deg) translateZ(100px) ;							
			}
			div:hover p:nth-child(4){
				transform:rotateY(90deg) translateZ(-100px) ;			
			}	
			div:hover p:nth-child(5){			
				transform:translateZ(100px) ;				
			}		
			div:hover p:nth-child(6){	
				transform: translateZ(-100px) ;
			}
		</style>
	</head>
	<body>
		<div>
			<p>1111</p>
			<p>2222</p>
			<p>3333</p>
			<p>4444</p>
			<p>5555</p>
			<p>6666</p>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height:200px;
				/*background:#000000;*/
				position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
				transform:rotateX(15deg) rotateY(20deg);
				transform-style: preserve-3d;
				/*transition: 1s;*/
				animation: zhuan 15s linear infinite;
			}
			p{
					width: 200px;
					height:200px;
					position: absolute;
			}
				p:nth-child(1){
				background:#0000FF;transform:translatez(200px);	}
				p:nth-child(2){
				background:#0000FF;transform:rotateY(60deg) translatez(200px);}
				p:nth-child(3){
				background:#00FF00;transform:rotateY(120deg) translatez(200px);}
				p:nth-child(4){
				background:#8F8F8F;transform:rotateY(180deg) translatez(200px);}
				p:nth-child(5){
				background:#E50011;transform:rotateY(240deg) translatez(200px);}
				p:nth-child(6){
				background:#FF00FF;transform:rotateY(300deg) translatez(200px);}
				@keyframes zhuan{
					0{transform:rotateX(0deg) rotateY(0deg);}
					15%{transform:rotateX(15deg) rotateY(90deg);}
					30%{transform:rotateX(0deg) rotateY(180deg);}
					45%{transform:rotateX(-15deg) rotateY(270deg);}
					60%{transform:rotateX(0deg) rotateY(360deg);}
					75%{transform:rotateX(15deg) rotateY(450deg);}
					90%{transform:rotateX(0deg) rotateY(540deg);}
					100%{transform:rotateX(-15deg) rotateY(630deg);}
				}
		</style>
	</head>
	<body>
		<div> 
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
		</div>
	</body>
</html>

骰子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			b{font-weight: normal;}
			div{
				margin-top:200px;
				display: flex;
				justify-content: space-around;
				transform-style: preserve-3d;				
				transform:rotate3d(1,1,1,10deg);
				/*border-radius: 15px;*/
				animation:animationName 4s infinite linear;
			}
			p{
				background:#fff;
				width:200px;
				height:200px;
				margin-top:50px;		
				display: flex;
				position: absolute;
				box-shadow:0px 0px 15px #1b3372 inset;
			}		
			
			@keyframes animationName{
				to{transform: rotate3d(1,1,1,360deg);}
			}
			
			
			span{
				width:40px;
				height:40px;
				border-radius: 50%;
				background:grey;
				display: block;
				margin:5px;
				box-shadow:0px 0px 5px #999;
			}
			p:nth-child(1){
				justify-content:center;
				align-items:center;
				transform:rotateX(90deg) translateZ(100px);
			}
			p:nth-child(2){
				
				justify-content: space-around;
				flex-direction:column;
				align-items:center;				
				transform:rotateX(90deg) translateZ(-100px);
			}
			
			
			p:nth-child(3){
				
				transform:rotateY(90deg) translateZ(100px) ;
			}
			
			
			p:nth-child(3) span:nth-child(2){
				align-self: center;				 
			}
			p:nth-child(3) span:nth-child(3){
				align-self: flex-end;			 
			}
			
			p:nth-child(4){
				justify-content: space-around;
				transform:rotateY(90deg) translateZ(-100px);
				
			}
			
			p:nth-child(4) b{
				display: flex;
				flex-direction: column;
				justify-content: space-around;				
			}
			p:nth-child(5){
				justify-content: space-around;
				transform:translateZ(100px);	
				
			}	
			p:nth-child(5) b{
				display: flex;
				flex-direction: column;
				justify-content: space-around;				
			}
			
			p:nth-child(6){
				justify-content: space-around;
				transform: translateZ(-100px) ;
				
			}	
			p:nth-child(6) b{
				display: flex;
				flex-direction: column;
				justify-content: space-around;				
			}
		</style>
	</head>
	<body>
	
			<div>
				<p>
					<span></span>
				</p>
				<p>
					<span></span>
					<span></span>
				</p>
				<p>
					<span></span>
					<span></span>
					<span></span>
				</p>
				<p>
				 	<b>
						<span></span>
						<span></span>
					 </b>
					 <b>
						<span></span>
						<span></span>
				 	</b>
				</p>
				<p>
					<b>
						<span></span>
						<span></span>
					</b>
					<b>
						<span></span>
					</b>
					<b>
						<span></span>
						<span></span>
					</b>
					
					
				</p>
				<p>
					<b>
						<span></span>
						<span></span>
						<span></span>
					</b>
					<b>
						<span></span>
						<span></span>
						<span></span>
					</b>
				</p>
			</div>

		
	</body>
</html>

动画demo