<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D轉換</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
/*.father{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid;
margin:100px auto;
perspective: 500px;
transform-style: preserve-3d;
transform: rotateY(89deg)
}
.son{
width: 100px;
height: 100px;
background-color: blue;
margin: 0 auto;
margin-top: 50px;
transform: rotateY(45deg);
}*/
/*body{
perspective: 500px;
}
ul{
width: 200px;
height: 200px;
border: 1px solid;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: sport 5s linear 0s infinite;
}
@keyframes sport {
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(360deg);
}
}
ul li {
width: 200px;
height: 200px;
list-style: none;
line-height: 200px;
font-size: 60px;
text-align: center;
position: absolute;
}*/
/*ul li:nth-child(1){
background-color: red;
transform: translateX(-100px) rotateY(90deg);
}
ul li:nth-child(2){
background-color: green;
transform: translateX(100px) rotateY(90deg);
}
ul li:nth-child(3){
background-color: blue;
transform: translateY(-100px) rotateX(90deg);
}
ul li:nth-child(4){
background-color: pink;
transform: translateY(100px) rotateX(90deg);
}
ul li:nth-child(5){
background-color: skyblue;
transform: translateZ(100px);
}
ul li:nth-child(6){
background-color: purple;
transform: translateZ(-100px);
}*/
/*ul li:nth-child(1){
background-color: red;
transform: rotateX(90deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(2){
background-color: green;
transform: rotateX(180deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(3){
background-color: blue;
transform: rotateX(270deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(4){
background-color: pink;
transform: rotateX(360deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(5){
background-color: skyblue;
transform: translateX(-200px) rotateY(90deg);
}
ul li:nth-child(6){
background-color: purple;
transform: translateX(200px) rotateY(90deg);
}
ul li img{
width: 200px;
height: 200px;
}*/
body{
background-image:url("../image/cloud1.jpeg");
background-size: cover;
overflow: hidden;
}
ul{
width: 200px;
height: 200px;
margin:0 auto;
position: absolute;
bottom: 100px;
left: 50%;
margin-left: -100px;
transform: rotateX(-10deg);
transform-style: preserve-3d;
animation: sport 5s linear 0s infinite;
}
@keyframes sport {
from{
transform: rotateX(-10deg) rotateY(0deg);
}
to{
transform: rotateX(-10deg) rotateY(360deg);
}
}
ul:hover {
animation-play-state: paused;
}
ul:hover li{
opacity: 0.5;
}
ul li:hover{
opacity: 1;
width: 250px;
height: 250px;
}
ul li{
width: 200px;
height: 200px;
position: absolute;
list-style: none;
border: 2px solid skyblue;
box-sizing: border-box;
overflow: hidden;
background-image: url("../image/o.gif");
}
ul li:nth-child(1){
transform: rotateY(60deg) translateZ(200px);
}
ul li:nth-child(2){
transform: rotateY(120deg) translateZ(200px);
}
ul li:nth-child(3){
transform: rotateY(180deg) translateZ(200px);
}
ul li:nth-child(4){
transform: rotateY(240deg) translateZ(200px);
}
ul li:nth-child(5){
transform: rotateY(300deg) translateZ(200px);
}
ul li:nth-child(6){
transform: rotateY(360deg) translateZ(200px);
}
ul li img{
width: 200px;
height: 200px;
position: absolute;
}
.cloud{
width: 173px;
height: 157px;
position: absolute;
left: 100px;
bottom: 100px;
animation: moveCloud 10s linear 0s infinite;
}
@keyframes moveCloud {
0%{
left: 100px;
bottom: 100px;
opacity: 1;
}
20%{
left: 300px;
bottom: 300px;
opacity: 0;
}
40%{
left: 500px;
bottom: 500px;
opacity: 1;
}
60%{
left: 800px;
bottom: 300px;
opacity: 0;
}
80%{
left: 1200px;
bottom: 100px;
opacity: 1;
}
100%{
left: 800px;
bottom: -200px;
}
}
</style>
</head>
<body>
<!-- <div class="father">
<div class="son">
</div>
</div> -->
<!-- <ul>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
</ul> -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<!-- <li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li>
<li><img src="../image/o.gif" alt=""></li> -->
</ul>
<img class="cloud" src="../image/cloud3.jpeg" alt="" >
<audio src="../image/test.mp3" autoplay loop>
</audio>
</body>
</html>
第180課 3D轉換模塊
2D就是一個平面，只有寬度和高度，沒有厚度
3D就是一個立體，有寬度和高度，還有厚度
默認情況下所有的元素都是2D展現
和透視一樣，想看到某個元素的3D效果，只需要給他的 父元素 添加一個transform-style屬性，
然后設置為preserve-3d即可 transform-style: preserve-3d;
第181課 3D轉換模型-正方體上
練習看代碼
第182課 3D轉換模型-正方體下
上下前后，90 180 270 360 z100px
第183課 3D轉換模型-長方體
添加scale(2,1)即可得到長方體
第184課 3D轉換模型-練習
只要父元素被拉伸了，子元素也會被拉伸
第185 - 186 課 3D播放器
注意點
1、動畫中如果有和默認樣式中同名的屬性，會覆蓋默認樣式中同名的屬性
2、在編寫動畫的時候，固定不變的值寫在前面，需要變化的值寫在后面
