纯css旋转相册(源码)

最新推荐文章于 2022-12-03 15:43:31 发布

西楠

最新推荐文章于 2022-12-03 15:43:31 发布

阅读量740

点赞数 5

本文链接：https://blog.csdn.net/x_xinan9416/article/details/108852253

版权

HTML CSS 3D动画图片轮播关键帧动画

关键词由CSDN通过智能技术生成

效果图:
在这里插入图片描述

image文件夹下载地址:图片下载地址https://pan.baidu.com/s/19ogY42uoYzGKBfEDFg-KWg

提取码：`5y2g`

代码:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
    
			
			animation:play 20s linear 0s infinite alternate;
		}
		.box{
    
			width: 200px;
			height: 300px;
			margin:200px auto;
			position: fixed;
			left:47%;
			transform-style:preserve-3d;
			/*transform:rotateX(-12deg);*/
			animation:player 15s linear infinite;

		}
		.p{
    
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height:100%;
		}
		.p:nth-child(1){
    
			transform:rotateY(0deg) translateZ(275px);
		}
		.p:nth-child(2){
    
			transform:rotateY(40deg) translateZ(275px);
		}
		.p:nth-child(3){
    
			transform:rotateY(80deg) translateZ(275px);
		}
		.p:nth-child(4){
    
			transform:rotateY(120deg) translateZ(275px)