Home >Web Front-end >CSS Tutorial >How to create a very cool 3D animation with CSS3
How to create a very cool 3D animation with CSS3
- 一个新手Original
- 2017-09-22 10:39:332089browse
CSS3 very cool 3D animation<!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>
The above is the detailed content of How to create a very cool 3D animation with CSS3. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to implement equal height layoutNext article：How to implement equal height layout