实现的效果
具体步骤如下
1.添加实现代码
在/themes/next/layout/ _custom/ 路径下新建cube-hollow.swig文件
添加如下内容
<style>
/*最外层容器样式*/
.wrap {
width: 0px;
height: 0px;
/*margin: 80px;*/
/*position: relative;*/
position: fixed;
/*显示位置*/
bottom: 80px;
right: 80px;
z-index: 999;
}
/*包裹所有容器样式*/
.cube {
width: 0px;
height: 0px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
animation: rotate linear 10s infinite;
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube div {
position: absolute;
/*显示大小*/
width: 50px;
height: 50px;
opacity: 0.8;
transition: all .4s;
}
/*定义所有图片样式*/
.pic {
width: 50px;
height: 50px;
}
.cube .out_front {
transform: rotateY(0deg) translateZ(25px);
}
.cube .out_back {
transform: translateZ(-25px) rotateY(180deg);
}
.cube .out_left {
transform: rotateY(-90deg) translateZ(25px);
}
.cube .out_right {
transform: rotateY(90deg) translateZ(25px