整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
助CSS所提供的animation動畫屬性及2D、3D變換屬性，我們可以擺脫對JavaScript的依賴，設計開發(fā)各類效果優(yōu)秀的前端動態(tài)效果，在之前文章和視頻中我們也介紹了不少基于CSS與JavaScript技術實現的各類動畫及頁面元素設計效果。本文主要介紹使用CSS技術實現精美的3D旋轉相冊效果。主要實現效果動畫展示如下：
純CSS技術實現旋轉相冊效果展示
本例開發(fā)主要涉及使用技術包括animation動畫屬性、keyframes關鍵幀、transform變形等相關知識及方法、技術。部分核心技術說明如下：
1、CSS自定義屬性（變量）
在使用CSS進行樣式定義時，可以使用自定義屬性，即變量。從變量而言考慮的話，會涉及到變量的定義、賦值與使用等。自定義屬性的聲明使用--表示。其賦值與style樣式其他屬性類似可通過：（冒號）進行賦值。在使用該自定義屬性時需要用var()函數對屬性名進行包裹。如在自定義變量需要進行數學運算時需要使用calc()方法。自定義屬性實例如下：
:root{--fontSize:2em;}
p{font-size:var(--fontSize);}CSS自定義屬性使用實例如上所示，我們定義了一個fontSize變量，在P元素選擇器中使用了該定義的變量，即設置P段落字體size為2em。
2、3D變換屬性與方法
實現3D效果需要使用3D變換相關屬性與方法，其主要屬性方法包括transform-origin（旋轉原點）、transform-style（旋轉類型2D/3D）、perspective（透視點）等屬性，主要方法包括translate位移、scale放縮、rotate旋轉與skew扭曲等。使用實例代碼如下：
position: absolute;//定位
transform-origin: center;//中心點
transform-style: preserve-3d;//類型
transform:
translateZ(400px) rotateY(60deg);
//沿Z軸移動400px，沿Y軸旋轉60度3、flex布局
本例需要使用flex布局用于實現將頁面元素在頁面中位置進行定位與布局設置，主要設置水平與垂直居中效果，實例代碼如下：
display: flex;
justify-content: center;
align-items: center;在明確以上基本技術點之后，我們就可以收集素材完整3D旋轉相冊的設計與制作。首先第一步就是素材的采集，本例所需圖片如下所示：
3D旋轉相冊圖片素材
在完成素材搜集基礎上就可以使用CSS頁面布局技術等，實現頁面的布局，通過旋轉變換，將10張圖片進行不同角度的分布。其中頁面布局代碼如下：
頁面布局代碼
完成頁面元素設置之后，就要考慮頁面布局問題，本例需要實現旋轉因此需要將每一個圖片所對應元素進行旋轉等變換設置。部分代碼如下：
CSS樣式設置
核心CSS樣式設置如上圖所示，其中我們定義了動畫animate，因此需要使用keyframes對其關鍵幀進行定義，關鍵幀定義如下：
動畫關鍵幀定義
通過關鍵幀定義之后，整個gallery層就會繞著y軸進行旋轉最終實現動態(tài)旋轉效果。本例靜態(tài)展示如下圖所示：
3D旋轉相冊靜態(tài)效果展示
以上給出了3D旋轉相冊設計及實現過程核心知識點及實現思路過程、核心代碼說明。如需完整代碼請關注并私信。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區(qū)回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！
天學習了平面動畫，今天來3D動畫：
css3的強大之處就在于它可以用很少量的標簽，來實現一些要用到插件或者js，jq很多代碼才能實現的復雜功能。隨著css3版本的推進，各瀏覽器的兼容性也會越來越好，開發(fā)會很容易。
實現上圖的關鍵點在于，如何布局不了解css3的可能會說要定位，其實不然，我們只需要transform的rotate和translate即可輕松實現旋轉位移.至于圖片了可以用img也可以直接背景圖。下面是我的頁面結構和css樣式
<style>
*{margin:0; padding:0; list-style: none;}
div{
width: 105px;
height: 150px;
margin:100px auto;
-webkit-perspective: 1000;
-webkit-perspective-origin: center center;
}
ul{
width: 105px;
height: 150px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transform:rotateX(-16deg) rotateY(0deg) rotateZ(0deg);
-webkit-animation: ;
}
@-webkit-keyframes run{
from{ }
to{ }
}
ul li{width: 105px; height: 150px; position: absolute; -webkit-background-size:100% 100%;}
ul li:nth-child(1){
background-image: url(images/01.jpg);
-webkit-transform: translateZ(200px);
}
ul li:nth-child(2){
background-image: url(images/02.jpg);
-webkit-transform:rotateY(30deg) translateZ(200px);
}
ul li:nth-child(3){
background-image: url(images/03.jpg);
-webkit-transform:rotateY(60deg) translateZ(200px);
}
ul li:nth-child(4){
background-image: url(images/04.jpg);
-webkit-transform:rotateY(90deg) translateZ(200px);
}
ul li:nth-child(5){
background-image: url(images/05.jpg);
-webkit-transform:rotateY(120deg) translateZ(200px);
}
ul li:nth-child(6){
background-image: url(images/06.jpg);
-webkit-transform:rotateY(150deg) translateZ(200px);
}
ul li:nth-child(7){
background-image: url(images/07.jpg);
-webkit-transform:rotateY(180deg) translateZ(200px);
}
ul li:nth-child(8){
background-image: url(images/08.jpg);
-webkit-transform:rotateY(210deg) translateZ(200px);
}
ul li:nth-child(9){
background-image: url(images/09.jpg);
-webkit-transform:rotateY(240deg) translateZ(200px);
}
ul li:nth-child(10){
background-image: url(images/10.jpg);
-webkit-transform:rotateY(270deg) translateZ(200px);
}
ul li:nth-child(11){
background-image: url(images/11.jpg);
-webkit-transform:rotateY(300deg) translateZ(200px);
}
ul li:nth-child(12){
background-image: url(images/12.jpg);
-webkit-transform:rotateY(330deg) translateZ(200px);
}
</style>
結構是div抱著ul和li有多少圖片就有多少個li（這里就不展示了）
只有這個相冊就可以旋轉了么，當然不會，各位還需要在上文@-webkit-keyframes處補全animation動畫即可，animation動畫在上篇《純css實現無縫滾動》中又詳細代碼 拿過來即可
這是一款基于 PHP + MySQL 的開源項目，選定本地電腦的圖庫目錄之后，就能變成一個很漂亮的相冊網頁，并且可以通過分類、標簽、顏色、鏈接、注釋、時長、尺寸等參數檢索內容，支持預覽圖片、視頻、音頻，甚至 txt 文檔 。
官方提供了一個演示站點：http://pichome.oaooa.com/
可以輕松地放大縮小、翻轉鏡像查看，并且可以查看和下載原圖，全憑之后可以通過左右鍵來瀏覽內容，可播放視頻、音頻，最有用的就是搜索功能了，找圖快才用的爽。
基于 PHP + MySQL 環(huán)境則可以部署在各種設備中，比如服務器、NAS、個人電腦、云服務器等，部署后可以在任何瀏覽器打開，所以手機電腦都可以方便的訪問，最重要的是免費、開源，還是相當不錯的。
官方安裝部署文檔： 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
國內使用gitee地址
https://gitee.com/zyx0814/Pichome/releases
備用下載： http://js.funet8.com/centos_software/Pichome-beta3.3.tar.gzcd /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.netnginx的配置
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;
}
}
域名解析到服務器
訪問： http://p.xgss.net/
新建數據庫用戶
分配權限
參考文檔
官網：https://oaooa.com/pichome.html
開發(fā)者提供了 Windows、Linux 以及 Docker 安裝方式。
使用Eagle或者Billfish，在本地windows系統(tǒng)下安裝Billfish素材管理工具，billfish為免費的。
在billfish軟件中將照片分類
將目錄上傳到服務器中，庫設置中添加目錄，就可以在web頁面中顯示你的圖片了。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
