助CSS所提供的animation動畫屬性及2D、3D變換屬性，我們可以擺脫對JavaScript的依賴，設(shè)計(jì)開發(fā)各類效果優(yōu)秀的前端動態(tài)效果，在之前文章和視頻中我們也介紹了不少基于CSS與JavaScript技術(shù)實(shí)現(xiàn)的各類動畫及頁面元素設(shè)計(jì)效果。本文主要介紹使用CSS技術(shù)實(shí)現(xiàn)精美的3D旋轉(zhuǎn)相冊效果。主要實(shí)現(xiàn)效果動畫展示如下：

核心技術(shù)說明

本例開發(fā)主要涉及使用技術(shù)包括animation動畫屬性、keyframes關(guān)鍵幀、transform變形等相關(guān)知識及方法、技術(shù)。部分核心技術(shù)說明如下：

1、CSS自定義屬性（變量）

在使用CSS進(jìn)行樣式定義時(shí)，可以使用自定義屬性，即變量。從變量而言考慮的話，會涉及到變量的定義、賦值與使用等。自定義屬性的聲明使用--表示。其賦值與style樣式其他屬性類似可通過：（冒號）進(jìn)行賦值。在使用該自定義屬性時(shí)需要用var()函數(shù)對屬性名進(jìn)行包裹。如在自定義變量需要進(jìn)行數(shù)學(xué)運(yùn)算時(shí)需要使用calc()方法。自定義屬性實(shí)例如下：

:root{--fontSize:2em;}
p{font-size:var(--fontSize);}

CSS自定義屬性使用實(shí)例如上所示，我們定義了一個(gè)fontSize變量，在P元素選擇器中使用了該定義的變量，即設(shè)置P段落字體size為2em。

2、3D變換屬性與方法

實(shí)現(xiàn)3D效果需要使用3D變換相關(guān)屬性與方法，其主要屬性方法包括transform-origin（旋轉(zhuǎn)原點(diǎn)）、transform-style（旋轉(zhuǎn)類型2D/3D）、perspective（透視點(diǎn)）等屬性，主要方法包括translate位移、scale放縮、rotate旋轉(zhuǎn)與skew扭曲等。使用實(shí)例代碼如下：

position: absolute;//定位
transform-origin: center;//中心點(diǎn)
transform-style: preserve-3d;//類型
transform: 
translateZ(400px) rotateY(60deg);
//沿Z軸移動400px，沿Y軸旋轉(zhuǎn)60度

3、flex布局

本例需要使用flex布局用于實(shí)現(xiàn)將頁面元素在頁面中位置進(jìn)行定位與布局設(shè)置，主要設(shè)置水平與垂直居中效果，實(shí)例代碼如下：

display: flex;
justify-content: center;
align-items: center;

設(shè)計(jì)與實(shí)現(xiàn)

在明確以上基本技術(shù)點(diǎn)之后，我們就可以收集素材完整3D旋轉(zhuǎn)相冊的設(shè)計(jì)與制作。首先第一步就是素材的采集，本例所需圖片如下所示：

在完成素材搜集基礎(chǔ)上就可以使用CSS頁面布局技術(shù)等，實(shí)現(xiàn)頁面的布局，通過旋轉(zhuǎn)變換，將10張圖片進(jìn)行不同角度的分布。其中頁面布局代碼如下：

完成頁面元素設(shè)置之后，就要考慮頁面布局問題，本例需要實(shí)現(xiàn)旋轉(zhuǎn)因此需要將每一個(gè)圖片所對應(yīng)元素進(jìn)行旋轉(zhuǎn)等變換設(shè)置。部分代碼如下：

核心CSS樣式設(shè)置如上圖所示，其中我們定義了動畫animate，因此需要使用keyframes對其關(guān)鍵幀進(jìn)行定義，關(guān)鍵幀定義如下：

通過關(guān)鍵幀定義之后，整個(gè)gallery層就會繞著y軸進(jìn)行旋轉(zhuǎn)最終實(shí)現(xiàn)動態(tài)旋轉(zhuǎn)效果。本例靜態(tài)展示如下圖所示：

以上給出了3D旋轉(zhuǎn)相冊設(shè)計(jì)及實(shí)現(xiàn)過程核心知識點(diǎn)及實(shí)現(xiàn)思路過程、核心代碼說明。如需完整代碼請關(guān)注并私信。

本頭條號長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對以上方面有興趣或代碼錯(cuò)誤、建議與意見，可在評論區(qū)回復(fù)。更多程序設(shè)計(jì)相關(guān)教程及實(shí)例分享，期待大家關(guān)注與閱讀！

奧PicHome介紹

這是一款基于 PHP + MySQL 的開源項(xiàng)目，選定本地電腦的圖庫目錄之后，就能變成一個(gè)很漂亮的相冊網(wǎng)頁，并且可以通過分類、標(biāo)簽、顏色、鏈接、注釋、時(shí)長、尺寸等參數(shù)檢索內(nèi)容，支持預(yù)覽圖片、視頻、音頻，甚至 txt 文檔 。

官方提供了一個(gè)演示站點(diǎn)：http://pichome.oaooa.com/

可以輕松地放大縮小、翻轉(zhuǎn)鏡像查看，并且可以查看和下載原圖，全憑之后可以通過左右鍵來瀏覽內(nèi)容，可播放視頻、音頻，最有用的就是搜索功能了，找圖快才用的爽。

基于 PHP + MySQL 環(huán)境則可以部署在各種設(shè)備中，比如服務(wù)器、NAS、個(gè)人電腦、云服務(wù)器等，部署后可以在任何瀏覽器打開，所以手機(jī)電腦都可以方便的訪問，最重要的是免費(fèi)、開源，還是相當(dāng)不錯(cuò)的。

安裝

官方安裝部署文檔： https://www.yuque.com/pichome/install

本次采用nginx+php7搭建

Gitee下載 https://gitee.com/zyx0814/Pichome/releases

下載安裝包：筆者這邊下載Pichome-beta3.3.tar.gz。

github下載 https://github.com/zyx0814/Pichome/releases

國內(nèi)使用gitee地址
https://gitee.com/zyx0814/Pichome/releases
備用下載： http://js.funet8.com/centos_software/Pichome-beta3.3.tar.gz

解壓安裝

cd /data/wwwroot/web
wget http://js.funet8.com/centos_software/Pichome-beta3.3.tar.gz
tar -zxvf Pichome-beta3.3.tar.gz
mv Pichome-beta3.3 p.xgss.net

配置nginx

nginx的配置

server {
        listen 80;
    server_name p.xgss.net;
    root /data/wwwroot/web/p.xgss.net;
    access_log /data/wwwroot/log/p.xgss.net-access.log main_aliyun;
    error_log /dev/null;

    location / {
            index  index.php index.htm index.html;
            if (!-e $request_filename){
                        rewrite ^(.*)$ /index.php?s=$1 last;
            }
            
        }
        location ~ .*\.(php|php5)?$     {
            fastcgi_pass 127.0.0.1:7300;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }

        location ~ .*\.(css|js|jpg|jpeg|gif|png|ico|bmp|gz|xml|zip|rar|swf|txt|xls|xlsx|flv|mid|doc|ppt|pdf|mp3|wma|exe)?$ {
                expires max;
                access_log off;
        }
}

域名解析到服務(wù)器

配置站點(diǎn)

訪問： http://p.xgss.net/

環(huán)境檢查

配置數(shù)據(jù)庫

新建數(shù)據(jù)庫用戶

分配權(quán)限

填寫管理員信息

新建庫

在線升級

參考文檔

官網(wǎng)：https://oaooa.com/pichome.html

開發(fā)者提供了 Windows、Linux 以及 Docker 安裝方式。

使用Billfish將圖片導(dǎo)入站點(diǎn)

使用Eagle或者Billfish，在本地windows系統(tǒng)下安裝Billfish素材管理工具，billfish為免費(fèi)的。

在billfish軟件中將照片分類

將目錄上傳到服務(wù)器中，庫設(shè)置中添加目錄，就可以在web頁面中顯示你的圖片了。