運用HTML、CSS做一個旋轉相冊
前言
話說情人節快到了，雖然我到現在還沒有女朋女，但是這不要緊，就為未來的女朋女做一個旋轉相冊吧！
文章目錄
- 運用HTML、CSS做一個旋轉相冊
- 1.了解三個重要的CSS屬性
- 1.1 transform-style屬性
- 1.2 animation屬性
- 1.3 transform屬性
- 2. 實作旋轉相冊
- 3.總結
1.了解三個重要的CSS屬性
1.1 transform-style屬性
這個屬性的作用是規定如何在 3D 空間中呈現被嵌套的元素，
1.2 animation屬性
這個屬性可以實作影片效果，讀者可以參考 w3school 上的這個屬性--------> animation
1.3 transform屬性
因為小編要實作的是3D效果，所以本次需要用到這個屬性下的六個比較重要函式，分別為rotateX(), rotateY(), rotateZ(), translateX(), translateY() ,translateZ(),其中，前三個函式里面的引數為角度，單位為 deg ，后面三個函式里面的引數為像素值(px)，
| 函式 | 含義 |
|---|---|
| rotateX | 定義沿著 X 軸的 3D 旋轉， |
| rotateY | 定義沿著 Y 軸的 3D 旋轉， |
| rotateZ | 定義沿著 Z 軸的 3D 旋轉， |
| translateX | 定義轉換，只是用 X 軸的值， |
| translateY | 定義轉換，只是用 Y 軸的值， |
| translateZ | 定義轉換，只是用 Z 軸的值， |
我們來看一下這三個屬性共同實作的一個效果：
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wenti</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
list-style-type: none;
}
.main li{
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: red;
}
.main li:nth-child(2n){
background: blanchedalmond;
}
.main li:nth-child(1){
transform: rotateX(60deg) translateX(20px);
animation: rotate1 4s linear infinite alternate;
}
@keyframes rotate1{
from{transform: rotateX(0deg) translateX(0px);}
to{transform: rotateX(60deg) translateX(20px);}
}
.main li:nth-child(3),li:nth-child(4){
top: 0;
left: 200px;
}
.main li:nth-child(3){
transform: rotateX(60deg) translateY(20px);
animation: rotate2 4s linear infinite alternate;
}
@keyframes rotate2{
from{transform: rotateX(0deg) translateY(0px);}
to{transform: rotateX(60deg) translateY(20px);}
}
.main li:nth-child(5),li:nth-child(6){
top: 0;
left: 400px;
}
.main li:nth-child(5){
transform: rotateX(60deg) translateZ(20px);
animation: rotate3 4s linear infinite alternate;
}
@keyframes rotate3{
from{transform: rotateX(0deg) translateZ(0px);}
to{transform: rotateX(60deg) translateZ(20px);}
}
.main li:nth-child(7),li:nth-child(8){
top: 200px;
left: 0;
}
.main li:nth-child(7){
transform: rotateY(60deg) translateX(20px);
animation: rotate4 4s linear infinite alternate;
}
@keyframes rotate4{
from{transform: rotateY(0deg) translateX(0px);}
to{transform: rotateY(60deg) translateX(20px);}
}
.main li:nth-child(9),li:nth-child(10){
top: 200px;
left: 200px;
}
.main li:nth-child(9){
transform: rotateY(60deg) translateY(20px);
animation: rotate5 4s linear infinite alternate;
}
@keyframes rotate5{
from{transform: rotateY(0deg) translateY(0px);}
to{transform: rotateY(60deg) translateY(20px);}
}
.main li:nth-child(11),li:nth-child(12){
top: 200px;
left: 400px;
}
.main li:nth-child(11){
transform: rotateY(60deg) translateZ(20px);
animation: rotate6 4s linear infinite alternate;
}
@keyframes rotate6{
from{transform: rotateY(0deg) translateZ(0px);}
to{transform: rotateY(60deg) translateZ(20px);}
}
.main li:nth-child(13),li:nth-child(14){
top: 400px;
left: 0;
}
.main li:nth-child(13){
transform: rotateZ(60deg) translateX(20px);
animation: rotate7 4s linear infinite alternate;
}
@keyframes rotate7{
from{transform: rotateZ(0deg) translateX(0px);}
to{transform: rotateZ(60deg) translateX(20px);}
}
.main li:nth-child(15),li:nth-child(16){
top: 400px;
left: 200px;
}
.main li:nth-child(15){
transform: rotateZ(60deg) translateY(20px);
animation: rotate8 4s linear infinite alternate;
}
@keyframes rotate8{
from{transform: rotateZ(0deg) translateY(0px);}
to{transform: rotateZ(60deg) translateY(20px);}
}
.main li:nth-child(17),li:nth-child(18){
top: 400px;
left: 400px;
}
.main li:nth-child(17){
transform: rotateZ(60deg) translateZ(20px);
animation: rotate9 4s linear infinite alternate;
}
@keyframes rotate9{
from{transform: rotateZ(0deg) translateZ(0px);}
to{transform: rotateZ(60deg) translateZ(20px);}
}
</style>
</head>
<body>
<ul class="main">
<li></li>
<li>rotateX(60deg) translateX(20px)</li>
<li></li>
<li>rotateX(60deg) translateY(20px)</li>
<li></li>
<li>rotateX(60deg) translateZ(20px)</li>
<li></li>
<li>rotateY(60deg) translateX(20px)</li>
<li></li>
<li>rotateY(60deg) translateY(20px)</li>
<li></li>
<li>rotateY(60deg) translateZ(20px)</li>
<li></li>
<li>rotateZ(60deg) translateX(20px)</li>
<li></li>
<li>rotateZ(60deg) translateY(20px)</li>
<li></li>
<li>rotateZ(60deg) translateZ(20px)</li>
</ul>
</body>
</html>
2. 實作旋轉相冊
看了上述代碼和運行結果，我想讀者應該對于實作旋轉相冊應該有了一個大體的想法了，
那么具體怎樣實作呢？其實，認真看上述代碼的讀者應該可以發現，ul標簽沒有設定 animation 屬性，如果設定了這個屬性會是什么效果呢？
看一下設定ul標簽的這個屬性之后的運行結果吧！
是不是發現了這是設定了ul標簽的 animation 屬性的結果，
當然，這也必須設定相對定位和絕對定位，不然還是無法實作這個效果的，
根據設定相對定位和絕對定位的原則，ul標簽應該設定為相對定位，li標簽設定為絕對定位，也就是 子 (標簽) 絕 (對定位) 父 (標簽)相 (對定位)
為了使旋轉的相冊有一個背景音樂，這里添加了一個 audio 標簽
代碼已經上傳到github，鏈接為:專案3.html
運行結果:
<iframe id="0c50MFpA-1612758673504" src="https://live.csdn.net/v/embed/151940" allowfullscreen="true" data-mediaembed="csdn"></iframe>
情人節快到了，我用前端知識做了一個關于“她”的3D旋轉相冊
3.總結
這是小編參加的一個活動，如果讀者覺得小編的這篇博文還不錯的話！記得點贊！小編在此謝謝了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258441.html
標籤：其他
下一篇：Hexo、主題、部署上線