筛子项目

猪猪恶霸

于 2020-07-06 12:19:17 发布

阅读量122

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/lqqcnsd/article/details/107154838

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			perspective: 800px;
			-webkit-perspective: 800px;  /*三维效果产生透视的效果的程度*/
			perspective-origin: 50%;
			-webkit-perspective-origin: 50%;   /*透视点的位置*/
		}
		
		.dice{
			display: inline-block;   /*行级显示的块级元素*/
			margin: 20px;
			width: 100px;
			height: 100px;
			transform-style: preserve-3d; /*三维空间呈现的样式为3d呈现*/
		}
		
		.dice>div{
			position: absolute;  /*绝对定位*/
			width: 100%;
			height: 100%;
			font-weight: bold;
			border: 1px solid;
			background-color: rgba(0,0,0,.1);
			box-shadow: inset 0 0 0.5 rgba(0,0,0,0.5);
			color: 	grey;
			line-height: 100px;
			text-align: center;
		}

		.front{
			-webkit-transform: translateZ(50px);
		}

		.back{
			transform: rotateY(180deg) translateZ(50px);
		}

		.right{
			transform: rotateY(90deg) translateZ(50px);
		}

		.left{
			transform: rotateY(-90deg) translateZ(50px);
		}

		.top{
			transform: rotateX(90deg) translateZ(50px);
		}

		.bottom{
			transform: rotateX(-90deg) translateZ(50px);
		}

		.one>div{
			backface-visibility: visible;
		}

		.two>div{
			backface-visibility: hidden;
		}
		
	</style>
</head>
<body>
	<div class="dice one">
		<div class="front">1</div>
		<div class="back">2</div>
		<div class="right">3</div>
		<div class="left">4</div>
		<div class="top">5</div>
		<div class="bottom">6</div>
	</div>

	<div class="dice two">
		<div class="front">1</div>
		<div class="back">2</div>
		<div class="right">3</div>
		<div class="left">4</div>
		<div class="top">5</div>
		<div class="bottom">6</div>
	</div>
</body>
</html>

猪猪恶霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
筛子项目

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ perspective: 800px; -webkit-perspective: 800px; /*三维效果产生透视的效果的程度*/ perspective-ori
复制链接

扫一扫

专栏目录