css动画 3d旋转相册

待我称王封你为后i 2021-07-25 02:37 523阅读 0赞

思路:
    	重叠四个图片,然后设置行变点在中心的z轴往后的方向上,分别设置其他图片
    	绕y轴的旋转角度,设置父容器的行变中心点和图片一样并设置透视和3d属性。
    	
    	若要俯瞰绕中心点旋转:设置父元素绕x轴旋转一定角度后,hover放上去时设置x轴旋转和y轴旋转
    	若要水平立体旋转:hover放上去时,只设置y轴旋转

代码示例:  
水平3d立体:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	<link rel="stylesheet" href="./index.css">
    	<style>
    		.box{ 
    			width: 400px;
    			height: 400px;
    			/* border: solid 1px blueviolet; */
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			transform-style: preserve-3d;
    			transform:perspective(900px);
    			margin: 100px auto;
    			transition: 1s;
    			transform-origin: center center -200px; 
    		}
    		.box:hover{ 
    			transform:perspective(900px) rotateY(560deg) ;
    		}
    		.box>div{ 
    			width: 200px;
    			height: 200px;
    			position: absolute;
    		}
    		.box>div>img{ 
    			width: 100%;
    			height: 100%;
    		}
    		.d1{ 
    			transform-origin: center center -200px;
    			transform: rotateY(90deg);
    		}
    		.d2{ 
    			transform-origin: center center -200px;
    			transform: rotateY(180deg);
    		}
    		.d3{ 
    			transform-origin: center center -200px;
    			transform: rotateY(270deg);
    		}
    		.d4{ 
    			transform-origin: center center -200px;
    			transform: rotateY(360deg);
    		}
    		
    /* .d1{ width: 300px; height: 200px; background-color: orange; position: absolute; display: flex; align-items: center; justify-content: center; color: white; z-index: -1; } .d2{ width: 300px; height: 200px; background-color: lightseagreen; display: flex; align-items: center; justify-content: center; color: white; transform: translateZ(100px); } */
    	</style>
    	</head>
    	<body class='me'>
    		<div class='box'>
    			<div class='d1'> <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg" alt="">	</div>
    			<div class='d2'> <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" alt="">	</div>
    			<div class='d3'> <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg" alt="">	</div>
    			<div class="d4"> <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" alt="">	</div>
    			
    		</div>
    		
    	</body>
    </html>

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]  
俯瞰3d旋转:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	<link rel="stylesheet" href="./index.css">
    	<style>
    		.box{ 
    			width: 400px;
    			height: 400px;
    			/* border: solid 1px blueviolet; */
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			transform-style: preserve-3d;
    			transform:perspective(900px) rotateX(-45deg);
    			margin: 100px auto;
    			transition: 1s;
    			transform-origin: center center -200px; 
    		}
    		.box:hover{ 
    			transform:perspective(900px) rotateX(-45deg) rotateY(560deg) ;
    		}
    		.box>div{ 
    			width: 200px;
    			height: 200px;
    			position: absolute;
    		}
    		.box>div>img{ 
    			width: 100%;
    			height: 100%;
    		}
    		.d1{ 
    			transform-origin: center center -200px;
    			transform: rotateY(90deg);
    		}
    		.d2{ 
    			transform-origin: center center -200px;
    			transform: rotateY(180deg);
    		}
    		.d3{ 
    			transform-origin: center center -200px;
    			transform: rotateY(270deg);
    		}
    		.d4{ 
    			transform-origin: center center -200px;
    			transform: rotateY(360deg);
    		}
    		
    /* .d1{ width: 300px; height: 200px; background-color: orange; position: absolute; display: flex; align-items: center; justify-content: center; color: white; z-index: -1; } .d2{ width: 300px; height: 200px; background-color: lightseagreen; display: flex; align-items: center; justify-content: center; color: white; transform: translateZ(100px); } */
    	</style>
    	</head>
    	<body class='me'>
    		<div class='box'>
    			<div class='d1'> <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg" alt="">	</div>
    			<div class='d2'> <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" alt="">	</div>
    			<div class='d3'> <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg" alt="">	</div>
    			<div class="d4"> <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" alt="">	</div>
    			
    		</div>
    		
    	</body>
    </html>

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200620210100161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/d98469f66d904bf7aa322f193fce3552.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200620210215460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 3]: /images/20210724/ee7e6c1af5e6477e8e3c99dbe711180a.png