web前端day6-----立方体旋转

最新推荐文章于 2022-08-15 20:47:39 发布

OrdnAry

最新推荐文章于 2022-08-15 20:47:39 发布

阅读量445

点赞数 1

分类专栏：学习文章标签： css

本文链接：https://blog.csdn.net/OrdnAry/article/details/107448556

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!--
立方体效果：
1.HTML内容：立方体，六个面，每个面是一张图
  图片插入网页：1.img标签 2.background-image背景图
2.CSS基本样式：尺寸宽高，位置 每个面绝对定位 偏移
3.实现立方体翻转效果：
	1.每个面3D翻转组合成立方体
		动画 旋转
	2.立方体旋转
-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>立方体翻转</title>
 <style>
/* 样式初始化*/
body,ul,li{margin:0;padding:0}
/*立方体*/
	ul{
		list-style:none;
		width:200px;
		height:200px;
		margin:200px auto;
		position:relative;/*立方体相对定位*/
		animation:lftdh 10s linear infinite;/*调用立方体动画*/
		transform-style:preserve-3d;/*保留子元素3D效果*/
	
	}
/*	定义立方体旋转动画*/
@keyframes lftdh{
	 0% {
            transform: rotateX(0deg) rotateY(0deg);
        }

        10% {
            transform: rotateX(0deg) rotateY(180deg);
        }

        20% {
            transform: rotateX(-180deg) rotateY(180deg);
        }

        30% {
            transform: rotateX(-360deg) rotateY(180deg);
        }

        40% {
            transform: rotateX(-360deg) rotateY(360deg);
        }

        50% {
            transform: rotateX(-180deg) rotateY(360deg);
        }

        60% {
            transform: rotateX(90deg) rotateY(180deg);
        }

        70% {
            transform: rotateX(0) rotateY(180deg);
        }

        80% {
            transform: rotateX(90deg) rotateY(90deg);
        }

        90% {
            transform: rotateX(90deg) rotateY(0);
        }

        100% {
            transform: rotateX(0) rotateY(0);
        }

}
/*六个面*/
	ul>li{
		width:100%;
		height:100%;
		position:absolute;/*六个面绝对定位*/
		}
/*		每一个面位置的调整*/
/*第一个面*/
	ul>li.one{
		top:0;
		left:-200px;
		animation:d1 2s linear 1;
		animation-fill-mode:forwards;/*保留动画最后一帧*/
		transform-origin:right;
	}
/*	定义第一个面组成立方体动画过程*/
@keyframes d1{
	0%{transform:perspective(20000px) rotateY(0deg);}
	100%{transform:perspective(20000px) rotateY(90deg);}
}
/*第二个面*/
	ul>li.two{
		top:0;
		left:0;
	}
/*第三个面*/
	ul>li.three{
		top:0;
		left:200px;
		animation:d3 2s linear 1;
		animation-fill-mode:forwards;/*保留动画最后一帧*/
		transform-origin:left;
	}
/*	定义第三个面组成立方体动画过程*/
@keyframes d3{
	0%{transform:perspective(20000px) rotateY(0deg);}
	100%{transform:perspective(20000px) rotateY(-90deg);}
}
/*第四个面*/
	ul>li.four{
		top:-200px;
		left:0;
		animation:d4 2s linear 1;
		animation-fill-mode:forwards;/*保留动画最后一帧*/
		transform-origin:bottom;
	}
/*	定义第四个面组成立方体动画过程*/
@keyframes d4{
	0%{transform:perspective(20000px) rotateX(0deg);}
	100%{transform:perspective(20000px) rotateX(-90deg);}
}
/*第五个面*/
	ul>li.five{
		top:200px;
		left:0;
		animation:d5 2s linear 1;
		animation-fill-mode:forwards;/*保留动画最后一帧*/
		transform-origin:top;
	}
/*	定义第五个面组成立方体动画过程*/
@keyframes d5{
	0%{transform:perspective(20000px) rotateX(0deg);}
	100%{transform:perspective(20000px) rotateX(90deg);}
}
/*第六个面*/
	ul>li.six{
		top:200px;
		left:200px;
		animation:d6 2s linear 1;
		animation-fill-mode:forwards;/*保留动画最后一帧*/
		transform-origin:top left;
	}
/*	定义第六个面组成立方体动画过程*/
@keyframes d6{
	0%{transform:perspective(20000px) rotateX(0deg) rotateY(0deg) translateZ(200px);}
	100%{transform:perspective(20000px) rotateX(180deg) rotateY(180deg) translateZ(200px);}
}
/*	六个面中的图片*/
	ul>li>img{
		width:100%;
		height:100%;
	}
 </style>
 </head>
 <body>
  <ul>
	<li class="one"><img src="img/1.jpg"></li>
	<li class="two"><img src="img/2.jpg"></li>
	<li class="three"><img src="img/4.jpg"></li>
	<li class="four"><img src="img/5.jpg"></li>
	<li class="five"><img src="img/5.jpg"></li>
	<li class="six"><img src="img/6.jpg"></li>
  </ul>
 </body>
</html>

在这里插入图片描述

OrdnAry

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端day6-----立方体旋转

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> &l
复制链接

扫一扫