CSS3d——立体几何效果（正方体）实现

1.效果图：

Alt

2.全局代码：

代码如下：


	<!doctype html>
	<html lang="en">
	 <head>
	  <meta charset="UTF-8">
	  <meta name="Generator" content="EditPlus®">
	  <meta name="Author" content="">
	  <meta name="Keywords" content="">
	  <meta name="Description" content="">
	  <title>Document</title> 
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
	
			ul[class="container"]{
				width:200px;
				height:200px;
				transform-style:preserve-3d;
				position:relative;
				box-shadow:0 2px 2px transparent;
				margin:100px auto;
				transform:perspective(400px)  rotateY(45deg) rotateX(45deg);
				animation:play 10s linear infinite;
			}	
	
			ul li{
				list-style-type:none;
				width:200px;
				height:200px;
				position:absolute;
				top:0;
				left:0;
				text-align:center;
				line-height:200px;
				font-size:80px;
			}
	
			ul li:first-child{
				background-color:#D6D6F5;
				transform:translateX(-100px) rotateY(90deg);
			}
	
			ul li:nth-child(2){
				background-color:#D06CE8;
				transform:translateX(100px) rotateY(90deg);
			}
	
			ul li:nth-child(3){
				background-color:#F5D6DC;
				transform:translateY(-100px) rotateX(90deg);
			}
	
			ul li:nth-child(4){
				background-color:#88CCBE;
				transform:translateY(100px) rotateX(90deg);
			}
	
			ul li:nth-child(5){
				background-color:#CCE372;
				transform:translateZ(-100px);
			}
	
			ul li:last-child{
				background-color:#5B9AFA;
				transform:translateZ(100px);
			}
	
			@keyframes play{
				0%{
					transform:rotateY(0deg) rotateX(0deg);
				}
	
				25%{
					transform:rotateY(180deg) rotateX(-180deg);
				}
				
				50%{
					transform:rotateY(360deg) rotateX(-360deg);
				}
	
				75%{
					transform:rotateY(540deg) rotateX(360deg);
				}
	
				100%{ 
					transform:rotateY(720deg) rotateX(180deg);
				}
			}
		</style>
	 </head>
	
	 <body>
		<ul class="container">
			<li>你</li>
			<li>看</li>
			<li>我</li>
			<li>我</li>
			<li>真</li>
			<li>炫</li>
		</ul>
	 </body>
	</html>

3.总结：

针对该3d变幻效果，就是对CSS里面的一些变形与动画的一些运用。详情请看：https://www.imooc.com/learn/33

更加炫酷的动画请参考：https://www.cnblogs.com/1wen/p/9064011.html

熟能生巧。

男孩子小杨

发布了56 篇原创文章 · 获赞 51 · 访问量 2万+

私信关注

CSS3d——立体几何效果（正方体）实现

CSS3d——立体几何效果（正方体）实现

1.效果图：

2.全局代码：

3.总结：

猜你喜欢