3D与动画：

最新推荐文章于 2024-07-21 17:58:14 发布

浅沫......

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量53

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/luoyuanye2003110/article/details/127988758

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           *{
               margin:0;
               padding:0;
           }
           body{
               perspective:1000px;
           }
           ul{
               width:800px;
               height:800px;
               margin:auto;
               position: relative;
               transform-style: preserve-3d;
               animation:name 3s infinite linear;
           }
           ul li{
               position: absolute;
               left: 40%;
               top: 40%;
               width: 200px;
               height: 200px;
               border: 1px solid orange;
               list-style: none;
               text-align: center;
               line-height: 200px;
           }
           ul li:nth-child(1){
               transform: translateZ(100px);
               background: url(img/1.jpg) no-repeat center/100% 100%;

           }
           ul li:nth-child(2){
               transform: translateZ(-100px);
               background: url(img/2.jpg) no-repeat center/100% 100%;

           }
           ul li:nth-child(3){
               transform: translateX(-100px) rotateY(90deg);
               background: url(img/3.jpg) no-repeat center/100% 100%;

           }
           ul li:nth-child(4){
               transform:translateX(100px) rotateY(90deg) ;
               background: url(img/4.jpg) no-repeat center/100% 100%;

           }
           ul li:nth-child(5){
               transform: translateY(-100px) rotateX(90deg);
               background: url(img/5.jpg) no-repeat center/100% 100%;

           }
           ul li:nth-child(6){
               transform: translateY(100px) rotateX(90deg);
               background: url(img/6.jpg) no-repeat center/100% 100%;

           }
           @keyframes name{
               from{
                   transform: rotateY(0);
               }
               to{
                   transform: rotateY(360deg);
               }
           }
       </style>
   </head>
   <body>
       <ul>
           <li>前</li>
           <li>后</li>
           <li>左</li>
           <li>右</li>
           <li>上</li>
           <li>下</li>

       </ul>
   </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				perspective:1000px;
			}
			ul{
				width:800px;
				height:800px;
				margin:auto;
				position: relative;
				transform-style: preserve-3d;
				animation:name 3s infinite linear;
			}
			ul li{
				position: absolute;
				left: 40%;
				top: 40%;
				width: 200px;
				height: 200px;
				border: 1px solid orange;
				list-style: none;
				text-align: center;
				line-height: 200px;
			}
			ul li:nth-child(1){
				transform: translateZ(100px);
				background: url(img/1.jpg) no-repeat center/100% 100%;
				
			}
			ul li:nth-child(2){
				transform: translateZ(-100px);
				background: url(img/2.jpg) no-repeat center/100% 100%;
				
			}
			ul li:nth-child(3){
				transform: translateX(-100px) rotateY(90deg);
				background: url(img/3.jpg) no-repeat center/100% 100%;
				
			}
			ul li:nth-child(4){
				transform:translateX(100px) rotateY(90deg) ;
				background: url(img/4.jpg) no-repeat center/100% 100%;
				
			}
			ul li:nth-child(5){
				transform: translateY(-100px) rotateX(90deg);
				background: url(img/5.jpg) no-repeat center/100% 100%;
				
			}
			ul li:nth-child(6){
				transform: translateY(100px) rotateX(90deg);
				background: url(img/6.jpg) no-repeat center/100% 100%;
				
			}
			@keyframes name{
				from{
					transform: rotateY(0);
				}
				to{
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<ul>
			<li>前</li>
			<li>后</li>
			<li>左</li>
			<li>右</li>
			<li>上</li>
			<li>下</li>
			
		</ul>
	</body>
</html>