CSS3实现3D透明立体盒子

最新推荐文章于 2021-07-30 20:00:36 发布

GaHoOo

最新推荐文章于 2021-07-30 20:00:36 发布

阅读量2.3k

点赞数 3

本文链接：https://blog.csdn.net/GaHoOo/article/details/83178544

版权

想要利用CSS3实现透明3D立体盒子

就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码

因此我设置了6个div，作为立方体的6个面

因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，因此要赋予每个面不一样的值，即不一样的位置它才能展现出来。

.trangel div:nth-of-type(1){
		left: 0;
		top:-100px;
	    background: -webkit-radial-gradient(rgba(20, 20, 20, 0.1), #000000);
		-webkit-transform-origin:bottom;    /*设置旋转元素的基点位置：从底部开始*/
		-webkit-transform: rotateX(90deg);  /*垂直旋转90°*/
				
	}

以上是对第一个盒子的样式，先是向上移动-100px的距离，然后再垂直旋转90°，

做好了一个面，其实其他的面就好理解了。

有代码注释，快去自己实现一下效果吧!!!

接下来是全部的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style>
	.wrap{
		width: 100px;
		height: 100px;
		padding: 100px;
		border: 1px solid black;
		margin: 50px auto;
		position: relative;
		-webkit-perspective-origin:right top;  /*可见面*/
		-webkit-perspective:600px;			/*可见立体长度*/
		}
	.trangel{
		width: 100px;
		height: 100px;
		position: relative;
		-webkit-transform-style: preserve-3d;	/*编制3D舞台效果*/
		transition: 1s all;  /*建立一秒的过渡属性*/
		}
	.trangel div{
		position: absolute;
		width: 100px;
	     height: 100px;		
		color: #fff;
		line-height: 100px;
		text-align: center;
				
	}
	.trangel div:nth-of-type(1){
		left: 0;
		top:-100px;
		background: -webkit-radial-gradient(rgba(20, 20, 20, 0.1), #000000);
		-webkit-transform-origin:bottom;    /*设置旋转元素的基点位置：从底部开始*/
		-webkit-transform: rotateX(90deg);  /*垂直旋转90°*/			
	}
	.trangel div:nth-of-type(2){
		left: -100px;
		top: 0;
		background: -webkit-radial-gradient( #000000, rgba(20, 20, 20, 0.1));
		-webkit-transform-origin: right;
		-webkit-transform: rotateY(-90deg);
	}
	.trangel div:nth-of-type(3){
		background: -webkit-radial-gradient( #000000, rgba(20, 20, 20, 0.1));
		left: 0px;
		top: 0;				
		}
	.trangel div:nth-of-type(4){
		left: 0px;
		top: 100px;
		background: -webkit-radial-gradient(rgba(0, 0, 0, 0), #000000);
		-webkit-transform-origin: top;
		-webkit-transform: rotateX(-90deg);
	}
	.trangel div:nth-of-type(5){
		left: 100px;
		top: 0px;
		background: -webkit-radial-gradient(#000000, rgba(20, 20, 20, 0.1));
		-webkit-transform-origin:left;
		-webkit-transform: rotateY(90deg);
	}
	.trangel div:nth-of-type(6){
		left: 0px;
		top: 0px;
		background: -webkit-radial-gradient(#000000, rgba(20, 20, 20, 0.1));
		-webkit-transform:translateZ(-100px) rotateX(180deg);
	}
	.wrap:hover .trangel{
		-webkit-transform: rotateX(180deg) rotateY(360deg) rotateZ(20deg);
	}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="trangel">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>			
		</div>
	</body>
</html>

GaHoOo

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
CSS3实现3D透明立体盒子

想要利用CSS3实现透明3D立体盒子就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码因此我设置了6个div，作为立方体的6个面因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，因此要赋予每个面不一样的值，即不一样的位置它才能展现出来。.trangel div:nth-of-type(1){ left: 0; top:-10...
复制链接

扫一扫