H 5 3 Dアニメーション実現
11891 ワード
H5 3D
:
/span>html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>3Dtitle>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
transform-style: preserve-3d; /* flat: 3D 。preserve-3d: 3D 。 */
animation: run 3s linear infinite;
animation-fill-mode: none; /* , 。 */
}
/* forwards: , ( )。
backwards: animation-delay , , ( )。
both: 。 */
ul li {
position: absolute;
list-style: none;
left: 0;
top: 0;
width: 200px;
height: 200px;
opacity: 0.5; /* */
}
ul li:first-child {
transform: translateY(100px) rotateX(90deg);
background: red;
}
ul li:nth-child(2) {
transform: translateX(100px) rotateY(90deg);
background: blue;
}
ul li:nth-child(3) {
transform: translateY(-100px) rotateX(90deg);
background: green;
}
ul li:nth-child(4) {
transform: translateX(-100px) rotateY(90deg);
background: yellow;
}
ul li:nth-child(5) {
transform: translateZ(-100px);
background: orange;
}
ul li:last-child {
transform: translateZ(100px);
background: pink;
}
@keyframes run {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
style>
head>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
<li>6li>
ul>
body>
html>