轻松熊喵喵个人笔记 -- 旋转相册_2d旋转相册-优快云博客

本文链接：https://blog.youkuaiyun.com/q490007458q/article/details/113741662

轻松熊喵喵个人笔记 -- 旋转相册

旋转相册

旋转相册

一、创建代码目录结构如下

二、html代码逻辑：

（1）通过audio音频标签自动播放背景音乐。

（2）对12张图片的处理逻辑，如下图所示：

    一个大的容器里包裹一大一小两个立方体，大立方体六个面各一张图片，小立方体六个面也是各一张图片。

   通过CSS3样式控制大小正方体进行3D旋转效果。

三、CSS样式详解：

   主要利用css3属性transform，preserve-3d，animation，@keyframes等属性来实现一个旋转相册的美观特效。



   下面需要注意的样式都写了详细的注释：

（1）设置整体背景色：黑色

html{
background: #000; /黑色/
height: 100%;
}

（2）设置最外层容器样式：绝对位置、长、宽等

/最外层容器样式/
.wrap{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 400px;
height: 400px;
margin: auto;
}
（3）包裹所有容器样式

.cube{
width: 400px;
height: 400px;
margin: 0 auto;
/所有子元素在3D空间中呈现/
transform-style: preserve-3d;
/Transform属性应用于元素的2D或3D转换。/
/沿着X轴旋转 -30度，沿着Y轴旋转 -80度/
transform: rotateX(-30deg) rotateY(-80deg);
/把 animation 绑定到rotate/
-webkit-animation: rotate 20s infinite;
/匀速/
animation-timing-function: linear;
}
/创建动画是通过逐步改变从一个CSS样式设定到另一个。/
@-webkit-keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
（4）定义所有大立方体图片样式：长、宽

.pic{
width: 400px;
height: 400px;
}
（5）定义大立方体样式：绝对位置、长、宽、透明度、过度效果

.cube div{
position: absolute;
width: 400px;
height: 400px;
/指定不透明度。从0.0（完全透明）到1.0（完全不透明）/
opacity: 0.8;
/所有属性过度效果持续5s/
transition: all 5s;
}
（6）设置大立方体各个面的旋转方式

.cube .out_front{
transform: rotateY(0deg) translateZ(200px);
}
.cube .out_back{
transform: translateZ(-200px) rotateY(180deg);
}
.cube .out_left{
transform: rotateY(90deg) translateZ(200px);
}
.cube .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
.cube .out_top{
transform: rotateX(90deg) translateZ(200px);
}
.cube .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
（7）定义内层小立方体图片样式

.cube .in_pic{
width: 200px;
height: 200px;
}
（8）定义小正方体样式：展示、长、宽、绝对位置等

.cube span{
display: block;
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
}
（9）设置小立方体各个面的旋转方式

.cube .in_front{
transform: rotateY(0deg) translateZ(100px);
}
.cube .in_back{
transform: translateZ(-100px) rotateY(180deg);
}
.cube .in_left{
transform: rotateY(90deg) translateZ(100px);
}
.cube .in_right{
transform: rotateY(-90deg) translateZ(100px);
}
.cube .in_top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
（10）设置鼠标移入立方体后的样式，外层立方体各个面向外扩张展示

.cube:hover .out_front{
transform: rotateY(0deg) translateZ(400px);
}
.cube:hover .out_back{
transform: translateZ(-400px) rotateY(180deg);
}
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(400px);
}
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(400px);
}
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(400px);
}
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(400px);
}