在前端的开发过程中,一般在写CSS的时候,会需要使用到css的动画知识,本文主要是实现一个简单的魔方来对动画和3D进行一个复习:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
margin:0;
padding:0;
}
.box {
width: 400px;
height: 400px;
margin: 200px auto;
position: relative;
font-size: 50px;
/*perspective: 1000px;*/
transform-style: preserve-3d;
animation: rotate 10s linear infinite alternate;
}
.box div {
width: 400px;
height: 400px;
position: absolute;
}
.right {
background-color: transparent;
transform: rotateY(90deg) translateZ(200px);
}
.left {
background-color: transparent;
transform: rotateY(-90deg) translateZ(200px);
}
.top {
background-color: transparent;
transform: rotateX(90deg) translateZ(200px);
}
.bottom {
background-color: transparent;
transform: rotateX(-90deg) translateZ(200px);
}
.before {
background-color: transparent;
transform: translateZ(200px);
}
.back {
background-color: transparent;
transform: translateZ(-200px);
}
li {
float: left;
width: 90px;
height: 90px;
border-radius: 20px;
margin: 5px;
text-align: center;
line-height: 90px;
}
.before li {
background-color:#0000FF;
}
.back li {
background-color:#008000;
}
.top li {
background-color: #FFFF00;
}
.bottom li {
background-color: #F8F8FF;
}
.left li {
background-color: #FFA500;
}
.right li {
background-color: #FF0000;
}
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
20% {
transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
}
40% {
transform: rotateY(-60deg) rotateX(-40deg) rotateZ(40deg);
}
60% {
transform: rotateY(145deg) rotateX(80deg) rotateZ(80deg);
}
80% {
transform: rotateY(90deg) rotateX(60deg) rotateZ(160deg);
}
100% {
transform: rotateY(135deg) rotateX(-45deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<!--
目的实现一个魔方来复习和巩固仔细学习的css3动画知识
1.魔方有是一个6面体,每个面上都有1-6这六个数字
2.我们需要将整个盒子设置为3D效果 --- transform-style: preserve-3d;
3.分别给6个面设置透明色--- background-color: transparent;
4.分别给6个面一个旋转的角度 transform: rotateY(90deg) translateZ(200px);
5.给魔方设置旋转--- animation: rotate 10s linear infinite alternate;
-->
<div class="box">
<div class="before">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
<div class="back">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
<div class="top">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
<div class="bottom">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
<div class="left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
<div class="right">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
</div>
</body>
</html>
效果图
总结
1.设置动画的旋转的进度
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
20% {
transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
}
40% {
transform: rotateY(-60deg) rotateX(-40deg) rotateZ(40deg);
}
60% {
transform: rotateY(145deg) rotateX(80deg) rotateZ(80deg);
}
80% {
transform: rotateY(90deg) rotateX(60deg) rotateZ(160deg);
}
100% {
transform: rotateY(135deg) rotateX(-45deg) rotateZ(360deg);
}
}
2.设置动画旋转的事件和次数
animation: rotate 10s linear infinite alternate;
3.动画的属性非常多,实际应用的时候多看看教程