html立体盒子

最新推荐文章于 2024-07-09 10:27:13 发布

幸福诗歌

最新推荐文章于 2024-07-09 10:27:13 发布

阅读量1.8k

点赞数 1

分类专栏：前端文章标签： html 3d

本文链接：https://blog.csdn.net/boke14122621/article/details/70991580

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3-3d变换</title>
	<style>
		*{ 
			margin:0;
			padding:0;
		 }
		 #content{ 
			width: 300px;
			height: 300px;
			margin: 200px auto;
			border: 1px solid  red;
			perspective: 500px;/* 景深 */
		  }
		  #box{ 
			width: 100%;
			height: 100%;
			position: relative; /* 父类加上相对定位 */
			transform-style: preserve-3d; /* 告诉浏览器 做3d效果*/
			transition: all 3s linear;
			 } 
		#box:hover{ 
			transform: rotateY(180deg);
		 }
		   #box li{ 
			width: 100%;
			height: 100%;
			list-style:none;
			position: absolute;
		    }
		    #box li:nth-of-type(1){ /* 按类型选中第一个 第一个li */
		    	height: 100px;
			background: red;
			/* transform: rotate(90deg); */
			/* top: -50px;
			transform: rotateX(-90deg); */
			top: -100px;
			transform-origin: bottom;
			transform: rotateX(-90deg);
		     }
		        #box li:nth-of-type(2){ 
		        	height: 100px;
			background: orange;
			top: 300px;
			transform-origin: top;
			transform: rotateX(90deg);
		     }
		      #box li:nth-of-type(3){ 
			background: yellow;
		     }
		        #box li:nth-of-type(4){ 
		        	width: 100px;
			background: green;
			left: -100px;
			transform-origin: right;
			transform: rotateY(90deg); 
		     }
		        #box li:nth-of-type(5){ 
		        	width: 100px;
			background: blue;
			left: 300px; 
			transform-origin: left;
			transform: rotateY(-90deg);
		     }
		        #box li:nth-of-type(6){ 
			 background: #f0f; 
			 transform: translateZ(100px);
		     }
	</style>
</head>
<body>
<h3>立体盒子</h3>
	<div id="content">
		<ul id="box">

			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
</body>
</html>