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

客官°小女子只卖身不卖艺 2021-09-15 14:58 298阅读 0赞

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轴永远垂直于盒子宽度和高度构成的平面

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

![70][]

![70 1][]

<!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>

[70]: /images/20210813/9f73c4a42604451bb76d2a5d888c57dc.png
[70 1]: /images/20210813/bab69654dcac47faab3aa1d8d4a896ba.png