助CSS所提供的animation动画属性及2D、3D变换属性，我们可以摆脱对JavaScript的依赖，设计开发各类效果优秀的前端动态效果，在之前文章和视频中我们也介绍了不少基于CSS与JavaScript技术实现的各类动画及页面元素设计效果。本文主要介绍使用CSS技术实现精美的3D旋转相册效果。主要实现效果动画展示如下：

核心技术说明

本例开发主要涉及使用技术包括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旋转相册的设计与制作。首先第一步就是素材的采集，本例所需图片如下所示：

在完成素材搜集基础上就可以使用CSS页面布局技术等，实现页面的布局，通过旋转变换，将10张图片进行不同角度的分布。其中页面布局代码如下：

完成页面元素设置之后，就要考虑页面布局问题，本例需要实现旋转因此需要将每一个图片所对应元素进行旋转等变换设置。部分代码如下：

核心CSS样式设置如上图所示，其中我们定义了动画animate，因此需要使用keyframes对其关键帧进行定义，关键帧定义如下：

通过关键帧定义之后，整个gallery层就会绕着y轴进行旋转最终实现动态旋转效果。本例静态展示如下图所示：

以上给出了3D旋转相册设计及实现过程核心知识点及实现思路过程、核心代码说明。如需完整代码请关注并私信。

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！

奥PicHome介绍

这是一款基于 PHP + MySQL 的开源项目，选定本地电脑的图库目录之后，就能变成一个很漂亮的相册网页，并且可以通过分类、标签、颜色、链接、注释、时长、尺寸等参数检索内容，支持预览图片、视频、音频，甚至 txt 文档 。

官方提供了一个演示站点：http://pichome.oaooa.com/

可以轻松地放大缩小、翻转镜像查看，并且可以查看和下载原图，全凭之后可以通过左右键来浏览内容，可播放视频、音频，最有用的就是搜索功能了，找图快才用的爽。

基于 PHP + MySQL 环境则可以部署在各种设备中，比如服务器、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.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;
        }
}

域名解析到服务器

配置站点

访问： http://p.xgss.net/

环境检查

配置数据库

新建数据库用户

分配权限

填写管理员信息

新建库

在线升级

参考文档

官网：https://oaooa.com/pichome.html

开发者提供了 Windows、Linux 以及 Docker 安装方式。

使用Billfish将图片导入站点

使用Eagle或者Billfish，在本地windows系统下安装Billfish素材管理工具，billfish为免费的。

在billfish软件中将照片分类

将目录上传到服务器中，库设置中添加目录，就可以在web页面中显示你的图片了。