Css样式--骰子3d

最新推荐文章于 2023-06-13 20:28:31 发布

爱狗的陈十七

最新推荐文章于 2023-06-13 20:28:31 发布

阅读量274

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/weixin_44599809/article/details/103463539

版权

html+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>骰子3D图</title>
		<style class="text/css">
		.wrap{
			width:100px;
			height:100px;
			border:1px solid glod;
			transform-style:preserve-3d;
			position:relative;
			margin:200px auto;
			transform:rotateY(45deg) rotateX(45deg) rotateZ(45deg);
			transition:5s;
		}
		.wrap:hover{
			transform:rotateY(720deg) rotateX(45deg) rotateZ(45deg);
		}
		.wrap div{
			width:100px;
			height:100px;
			text-align:center;
			line-height:100px;	
			color:white;
			position:absolute;
			top:0;
			left:0;
			transition:3s;
			opacity:0.5;
		}
		/*.wrap:hover*/ .box1{
			background:red;
			transform:rotateY(90deg) translateZ(50px);
		}
		/*.wrap:hover */.box2{
			background:yellow;
			transform:rotateY(90deg) translateZ(-50px);
		}
		/*.wrap:hover*/ .box3{
			background:green;
			transform:rotateX(90deg) translateZ(50px);	
		}
		/*.wrap:hover*/ .box4{
			background:blue;
			transform:rotateX(90deg) translateZ(-50px);	
		}
		/*.wrap:hover*/ .box5{
			background:plum;
			transform:translateZ(-50px);
		}
		/*.wrap:hover*/ .box6{
			background:black;
			transform:translateZ(50px);
			
		}		
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>	
			<div class="box4">4</div>
			<div class="box5">5</div>
			<div class="box6">6</div>
		</div>
	</body>
</html>

爱狗的陈十七

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css样式--骰子3d

<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>骰子3D图</title> <style class="text/css"> .wrap{ width:100px; height:100px;...
复制链接

扫一扫