用css3transform做出3D旋转的骰子

最新推荐文章于 2024-01-11 16:24:32 发布

sdfujichao

最新推荐文章于 2024-01-11 16:24:32 发布

阅读量3.6k

点赞数 4

分类专栏： css3 文章标签： css3的3D效果

本文链接：https://blog.csdn.net/sdfujichao/article/details/51863900

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这个效果利用了3D旋转平移，主要的注意点是当一个面旋转以后他的xyz轴还得按照以前的xyz轴来做，他的xyz轴并不是开始时吧的xyz轴的方向，他的xyz轴也同时受到了旋转的影响而发生改变。所以可以先平移然后在旋转。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap{perspective: 1000px; width: 1000px; height: 600px; margin: 0 auto;background: orchid;position: relative;}
			.wrap .box{transition: all 1s; transform-style: preserve-3d; position: absolute;left: 35%;top: 35%;width: 200px; height: 200px;background: lawngreen;opacity: 0.7;transform: rotateX(0deg);}
			.box>div{position: absolute;left: 0;top: 0;width: 200px;height: 200px;background: black;}
			
			.box div:nth-child(1){transform: translateZ(100px); transition: all 1s;}
			.box div:nth-child(2){transform: translateZ(-100px);transition: all 1s;}
			.box div:nth-child(3){transform: translateX(100px) rotateY(90deg);transition: all 1s;}
			.box div:nth-child(4){transform: translateX(-100px) rotateY(90deg);transition: all 1s;}
			.box div:nth-child(5){transform: translateY(100px) rotateX(90deg);transition: all 1s;}
			.box div:nth-child(6){transform: translateY(-100px) rotateX(90deg);transition: all 1s;}
			
			.box:hover div:nth-child(1){transform: translateZ(200px);}
			.box:hover div:nth-child(2){transform: translateZ(-200px);}
			.box:hover div:nth-child(3){transform: translateX(200px) rotateY(90deg); }
			.box:hover div:nth-child(4){transform: translateX(-200px) rotateY(90deg); }
			.box:hover div:nth-child(5){transform: translateY(200px) rotateX(90deg); }
			.box:hover div:nth-child(6){transform: translateY(-200px) rotateX(90deg); }
			
			@keyframes move{
				from{transform: rotateX(0deg) rotateZ(0deg);}
				to{transform: rotateX(360deg) rotateZ(360deg);}
			}
			.box{
				animation: move 5s  linear 0s infinite;
				
			}
			
			
			.box span{display: block; background: white; width: 50px; height: 50px; position: absolute;left: 75px;top:75px ;}
			.box span:nth-child(6){transform: translateZ(25px); transition: all 1s;}
			.box span:nth-child(7){transform: translateZ(-25px);transition: all 1s;}
			.box span:nth-child(8){transform: translateX(25px) rotateY(90deg);}
			.box span:nth-child(9){transform: translateX(-25px) rotateY(90deg);}
			.box span:nth-child(10){transform: translateY(25px) rotateX(90deg);}
			.box span:nth-child(11){transform: translateY(-25px) rotateX(90deg);}
			
		</style>
	</head>
	<body>
		
		<div class="wrap">
			<div class="box">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		console.log(localStorage.length)
	</script>
</html>

sdfujichao

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用css3transform做出3D旋转的骰子

这个效果利用了3D旋转平移，主要的注意点是当一个面旋转以后他的xyz轴还得按照以前的xyz轴来做，他的xyz轴并不是开始时吧的xyz轴的方向，他的xyz轴也同时受到了旋转的影响而发生改变。所以可以先平移然后在旋转。 .wrap{perspective: 1000px; width: 1000px; height: 600px; margin: 0 auto
复制链接

扫一扫

专栏目录