CSS-3D之制作3D骰子

最新推荐文章于 2024-04-13 10:39:53 发布

Web攻城狮

最新推荐文章于 2024-04-13 10:39:53 发布

阅读量2.1k

点赞数 3

分类专栏： css3 文章标签： CSS-3D 3D骰子 css3 旋转

本文链接：https://blog.csdn.net/b1244154318/article/details/52554867

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS-3D之制作3D骰子

css3 3d其实还是转换的一种，css3提供了2D转换，里面有位移、缩放、旋转、斜拉，这些个效果都是在2d平面上的效果。那么3d其实就是多了一个维度，也就是多了个坐标轴。

页面中想做3d效果就需要一个东西，就是盛放3d变换的元素的容器，咱们把它叫做舞台<div class='stage'></div>，在stage的css加上transform-style: preserve-3d 可以不写哦（默认会判断）~~

transform-origin：50% 50%(默认)。

还有一个要说的就是perspective

写法有两种情况：
一、写到父元素
属性值：属性值
perspective: 1200px;
二、写到子元素，起效果的那个元素
transform:perspective(1200px) translateZ(300px) translate(30px,30px);

总之呢，就是四个字，近大远小

再来看看这个东西perspective-origin，其实就像相机对焦一样，就是焦点嘛，眼睛聚焦的地方。

最后再看一个东西。

backface-visibility backface-visibility 属性定义当元素不面向屏幕时是否可见。

visible 背面是可见的。
hidden 背面是不可见的。

二话不说，直接上干货。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>骰子</title>
	<style>
		body{
			background:#ccc;
		}
		p{
			padding:0;
			margin:0;
		}
		/*创建舞台的样式*/
		.stage{
			width:100px;
			height:100px;
			/*background:#fff;*/
			perspective: 2000px;
			margin:100px auto 0;
			transform-style:preserve-3d; 
			border:.0px solid gray;
			position: relative;
			transition: all 1s;
			animation:;
			transform:rotateX(-25deg) rotateY(15deg);
			
		}
		.stage:hover{
			transform: rotateX(180deg) rotateY(180deg);
		}
		/*创建面的样式*/
		.con{
			width:100%;
			height:100%;
			background: #fff;
			opacity: 1;
			border-radius: 10px;
			position: absolute;
		}
		/*创点的样式*/
		.dot{
			width:25px;
			height: 25px;
			border-radius: 50%;
			background:blue;
		}
		/*	控制点的位置*/
		.stage .con:first-child{
			display:flex;
			justify-content: center;
			align-items: center;
		}
		.stage .con:first-child .dot{
			width:40px;
			height: 40px;
			background: red;
		}
		.stage .con:nth-child(4) .dot{
			background: red;
		}
		
		.stage .con:nth-child(2){
			display:flex;
			justify-content:space-around;
			
		}
		.stage .con:nth-child(2) .dot:nth-child(2){
			align-self: flex-end;
		}
		.stage .con:nth-child(3){
			display:flex;
			justify-content:space-around;
			
		}
		.stage .con:nth-child(3) .dot:nth-child(2){
			align-self: center;
		}
		.stage .con:nth-child(3) .dot:nth-child(3){
			align-self: flex-end;
		}
		.stage .con:nth-child(4){
			display:flex;
			flex-direction: column;
			justify-content:space-around;
			
		}
		.stage .con:nth-child(4) .scon{
			display: flex;
			justify-content:space-around;
		}
		.stage .con:nth-child(5){
			display:flex;
			flex-direction: column;
			justify-content:space-around;
			
		}
		.stage .con:nth-child(5) .scon{
			display: flex;
			justify-content:space-around;
		}
		.stage .con:nth-child(5) .scon:nth-child(2){
			display: flex;
			justify-content:center;
		}
		.stage .con:nth-child(6){
			display:flex;
			flex-direction: column;
			justify-content:space-around;
			
		}
		.stage .con:nth-child(6) .scon{
			display: flex;
			justify-content:space-around;
		}
		/*旋转六个面,形成一个立方体*/
		.stage .con:first-child{
			transform: translateZ(50px);
		}
		.stage .con:nth-child(6){
			transform: translateZ(-50px);
		}
		.stage .con:nth-child(2){
			transform: translateX(-50px) rotateY(90deg);
		}
		.stage .con:nth-child(5){
			transform: translateX(50px) rotateY(90deg);
		}
		.stage .con:nth-child(3){
			transform: translateY(-50px) rotateX(90deg);
		}
		.stage .con:nth-child(4){
			transform: translateY(50px) rotateX(90deg);
		}
	</style>
</head>
<body>
<div class="stage">
	<div class="con">
		<p class="dot"></p>
	</div>
	<div class="con">
		<p class="dot"></p>
		<p class="dot"></p>
	</div>
	<div class="con">
		<p class="dot"></p>
		<p class="dot"></p>
		<p class="dot"></p>
	</div>
	<div class="con">
		<div class="scon">
			<p class="dot"></p>
			<p class="dot"></p>
		</div>
		<div class="scon">
			<p class="dot"></p>
			<p class="dot"></p>
		</div>
	</div>
	<div class="con">
		<div class="scon">
			<p class="dot"></p>
			<p class="dot"></p>
		</div>
		<div class="scon">
			<p class="dot"></p>
		</div>
		<div class="scon">
			<p class="dot"></p>
			<p class="dot"></p>
		</div>
	</div>
	<div class="con">
		<div class="scon">
			<p class="dot"></p>
			<p class="dot"></p>
		</div>
		<div class="scon">
			<p class="dot"></p>
			<p class="dot"></p>
		</div>
		<div class="scon">
			<p class="dot"></p>
			<p class="dot"></p>
		</div>
	</div>
	
</div>
	<button>随机旋转</button>
</body>
<script src="jquery.js"></script>
<script>
   //随机旋转角度
	$("button").click(function(){
		var arr=[-4,-3,-2,-1,0,1,2,3,4];
		var a = Math.floor(Math.random()*9);
		var b = Math.floor(Math.random()*9);
		$(".stage").css({
			transform: "rotateX("+(arr[a]*90)+"deg) rotateY("+(arr[b]*90)+"deg)"
		});
		
	});
</script>
</html>

Web攻城狮

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS-3D之制作3D骰子

CSS-3D之制作3D骰子css3 3d其实还是转换的一种，css3提供了2D转换，里面有位移、缩放、旋转、斜拉，这些个效果都是在2d平面上的效果。那么3d其实就是多了一个维度，也就是多了个坐标轴。页面中想做3d效果就需要一个东西，就是盛放3d变换的元素的容器，咱们把它叫做舞台，在stage的css加上transform-style: preserve-3d 可以不写哦（默认会判
复制链接

扫一扫