如何製作一個CSS3非常酷的3D動畫
- 一个新手原創
- 2017-09-22 10:39:332089瀏覽
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>
以上是如何製作一個CSS3非常酷的3D動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn