html中css3之3d基本知识点完成一个立方体的并且让其旋转

最新推荐文章于 2024-09-07 04:45:19 发布

七上八下的爆米花

最新推荐文章于 2024-09-07 04:45:19 发布

阅读量2.2k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/lanseguhui/article/details/80804201

版权

html 专栏收录该内容

51 篇文章 3 订阅

订阅专栏

 
 1.开启该盒子的3d视图，让其内部的子级进行3d变化时，可见 

  transform-style: preserve-3d; 

 
 2.设置观察者距离：设置了观察者和变形盒子之间的距离，盒子在沿z轴变化时，将在设置的距离上按照近大远小的规律变化 

  perspective: 500px; 

 
 3.设置3d观察者的角度 

   perspective-origin：center center （中心） 

  perspective-origin：left top （左上角） 

  perspective-origin：100% 100% （右下角） 

  4.3d旋转时 默认的旋转值是360deg 在使用时，如果需要多个状态之间的切换，每个状态的属性 

  值要一一对应 在变形当中每个盒子都有自己的坐标系，与浏览器无关，X轴永远代表 

盒子宽度方向，y轴永远代表盒子的高度方向，z轴永远垂直于盒子宽度和高度构成的平面

完成一个立方体并且让其旋转

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.wrap{
			width: 200px;
			height: 200px;
			/*border: 1px solid blue;*/
			position: relative;
			margin: 300px auto;
			transform-style: preserve-3d;
			transform: rotateX(45deg) rotateY(45deg);
		}
		.wrap>.box{
			position: absolute;
			top: 0;
			left: 0;
			text-align: center;
			line-height: 200px;
			width: 100%;
			height: 100%;
			color: white;
			background: red;
			opacity: 0.5;
			font-size: 50px;
			transition: 1s;
			box-shadow: 0px 0px 100px #FFFF66;
			border-radius: 20px;
		}
		body{
			background: black;
		}



		.wrap>.box:nth-child(1){
			background: green;
			/*transform: rotateX(90deg) translateZ(100px);*/
			transition-delay: 0s;
		}
		.wrap>.box:nth-child(2){
			background: yellow;
			/*transform: rotateX(90deg) translateZ(-100px);*/
			transition-delay: 1s;
		}
		.wrap>.box:nth-child(3){
			background: blue;
			/*transform: rotateY(90deg) translateZ(-100px);*/
			transition-delay: 2s;
		}
		.wrap>.box:nth-child(4){
			background: pink;
			/*transform: rotateY(90deg) translateZ(100px);*/
			transition-delay: 3s;
		}
		.wrap>.box:nth-child(5){
			background: pink;
			/*transform: translateZ(100px);*/
			transition-delay: 4s;
		}
		.wrap>.box:nth-child(6){
			background: pink;
			/*transform: translateZ(-100px);*/
			transition-delay: 5s;
		}




		.wrap:hover .box:nth-child(1){
			background: green;
			transform: rotateX(90deg) translateZ(100px);
			
		}
		
		.wrap:hover .box:nth-child(2){
			background: yellow;
			transform: rotateX(90deg) translateZ(-100px);
			
		}
		.wrap:hover .box:nth-child(3){
			background: blue;
			transform: rotateY(90deg) translateZ(-100px);
			
		}
		.wrap:hover .box:nth-child(4){
			background: pink;
			transform: rotateY(90deg) translateZ(100px);
		
		}
		.wrap:hover .box:nth-child(5){
			background: pink;
			transform: translateZ(100px);
		
		}
		.wrap:hover .box:nth-child(6){
			background: pink;
			transform: translateZ(-100px);
		
		}
		.wrap:hover{
			transform: rotateX(3600deg) rotateY(3600deg);
			transition: 100s  6s ;
		
		}
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		

	</style>
</head>
<body>
	<div class="wrap">
		<div class="box">
			<img src="./1.jpeg" alt="">
		</div>
		<div class="box">
			<img src="./2.jpeg" alt="">
		</div>
		<div class="box">
			<img src="./3.jpeg" alt="">
		</div>
		<div class="box">
			<img src="./4.jpeg" alt="">
		</div>
		<div class="box">
			<img src="./5.jpeg" alt="">
		</div>
		<div class="box">
			<img src="./6.jpeg" alt="">
		</div>
	</div>
	
</body>
</html>