如何制作一个CSS3非常炫酷的3D动画
2020-11-27
来源：爱够旅游网
CSS3非常炫酷的3D动画<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
ul{
width: 200px;
height: 200px;
position: relative;
margin: 300px auto;
/*转换成3D*/
transform-style: preserve-3d;
/*动画属性绑定向一个选择器*/
animation: run 3s infinite linear;
}
li{
list-style: none;
width: 200px;
height: 200px;
/*透明度*/
opacity: 0.5;
position: absolute;
left: 0px;
top: 0px;
}
li:first-child{
background: #3be637;
/*平移动画*/
transform: translateZ(-100px);
}
li:nth-child(2){
background: red;
transform:translateX(-100px) rotateY(90deg);
}
li:nth-child(3){
background: darkblue;
transform:translateY(-100px) rotateX(90deg);
}
li:nth-child(4){
background:#0d1426;
/*缩放动画*/
transform:translateX(100px) rotateY(90deg);
}
li:nth-child(5){
background: pink;
transform:translateY(100px) rotateX(90deg);
}
li:nth-child(6){
background: peru;
/*位移*/
transform: translateZ(100px);
}
/*关键帧*/
@keyframes run {
/*旋转*/
0%{transform: rotateX(0deg) rotateY(0deg)}
100%{transform: rotateX(180deg) rotateY(180deg)}
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
显示全文