代码拉取完成,页面将自动刷新
同步操作将从 小枫/3D旋转立体相册 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
* {
margin: 0;
padding: 0;
}
body {
background-color: pink;
background: -webkit-linear-gradient(145deg, pink, skyblue) no-repeat;
background: -moz-linear-gradient(145deg, pink, skyblue) no-repeat;
background: linear-gradient(145deg, pink, skyblue) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;
overflow-y: hidden;
}
/* 粉红色的鼠标选中样式 */
::selection {
background: pink;
color: pink;
}
::-moz-selection {
background: pink;
color: pink;
}
li {
list-style: none;
}
audio {
display: block;
margin: 30px auto 0;
}
.xf_3d_box {
width: 200px;
height: 200px;
position: absolute;
margin-top: 150px;
margin-left: 45%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: lovexf 10s linear infinite;
animation: lovexf 10s linear infinite;
}
.xf_3d_box .xf_rotate_1 {
width: 180px;
height: 180px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.xf_3d_box .xf_rotate_1 li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.xf_3d_box .xf_rotate_1 li img {
width: 100%;
height: 100%;
}
.xf_3d_box .xf_rotate_1 li:nth-child(1) {
-webkit-transform: rotateY(0) translateZ(90px);
transform: rotateY(0) translateZ(90px);
background-color: white;
}
.xf_3d_box .xf_rotate_1 li:nth-child(2) {
-webkit-transform: rotateX(0deg) translateZ(-90px);
transform: rotateX(0deg) translateZ(-90px);
background-color: white;
}
.xf_3d_box .xf_rotate_1 li:nth-child(3) {
-webkit-transform: rotateX(-90deg) translateZ(90px);
transform: rotateX(-90deg) translateZ(90px);
background-color: white;
}
.xf_3d_box .xf_rotate_1 li:nth-child(4) {
-webkit-transform: rotateX(90deg) translateZ(90px);
transform: rotateX(90deg) translateZ(90px);
background-color: white;
}
.xf_3d_box .xf_rotate_1 li:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(90px);
transform: rotateY(-90deg) translateZ(90px);
background-color: white;
}
.xf_3d_box .xf_rotate_1 li:nth-child(6) {
-webkit-transform: rotateY(90deg) translateZ(90px);
transform: rotateY(90deg) translateZ(90px);
background-color: white;
}
.xf_3d_box .xf_rotate_2 {
position: absolute;
left: -50px;
top: -50px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/*opacity: 0;*/
}
.xf_3d_box .xf_rotate_2 li {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
-webkit-box-shadow: 0 0 8px 1px white;
box-shadow: 0 0 8px 1px white;
-webkit-opacity: 0.9;
opacity: 0.9;
}
.xf_3d_box .xf_rotate_2 li img {
width: 100%;
height: 100%;
}
.xf_3d_box .xf_rotate_2 li:nth-child(1) {
-webkit-transform: translateZ(220px);
transform: translateZ(220px);
background-color: pink;
}
.xf_3d_box .xf_rotate_2 li:nth-child(2) {
-webkit-transform: rotateX(0) translateZ(-220px);
transform: rotateX(0) translateZ(-220px);
background-color: pink;
}
.xf_3d_box .xf_rotate_2 li:nth-child(3) {
-webkit-transform: rotateX(-90deg) translateZ(220px);
transform: rotateX(-90deg) translateZ(220px);
background-color: pink;
display: none;
}
.xf_3d_box .xf_rotate_2 li:nth-child(4) {
-webkit-transform: rotateX(90deg) translateZ(220px);
transform: rotateX(90deg) translateZ(220px);
background-color: pink;
display: none;
}
.xf_3d_box .xf_rotate_2 li:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(220px);
transform: rotateY(-90deg) translateZ(220px);
background-color: pink;
}
.xf_3d_box .xf_rotate_2 li:nth-child(6) {
-webkit-transform: rotateY(90deg) translateZ(220px);
transform: rotateY(90deg) translateZ(220px);
background-color: pink;
}
@keyframes lovexf {
0% {
-webkit-transform: rotateX(10deg) rotateY(0deg);
transform: rotateX(10deg) rotateY(0deg);
}
100% {
-webkit-transform: rotateX(10deg) rotateY(360deg);
transform: rotateX(10deg) rotateY(360deg);
}
}
@media screen and (max-width: 420px) {
.xf_3d_box {
width: 180px;
height: 180px;
margin-left: 22%;
}
.xf_3d_box .xf_rotate_1 {
width: 120px;
height: 120px;
margin-top: -19px;
}
.xf_3d_box .xf_rotate_1 li:nth-child(1) {
-webkit-transform: rotateY(0) translateZ(60px);
transform: rotateY(0) translateZ(60px);
}
.xf_3d_box .xf_rotate_1 li:nth-child(2) {
-webkit-transform: rotateX(0deg) translateZ(-60px);
transform: rotateX(0deg) translateZ(-60px);
}
.xf_3d_box .xf_rotate_1 li:nth-child(3) {
-webkit-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px);
}
.xf_3d_box .xf_rotate_1 li:nth-child(4) {
-webkit-transform: rotateX(90deg) translateZ(60px);
transform: rotateX(90deg) translateZ(60px);
}
.xf_3d_box .xf_rotate_1 li:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(60px);
transform: rotateY(-90deg) translateZ(60px);
}
.xf_3d_box .xf_rotate_1 li:nth-child(6) {
-webkit-transform: rotateY(90deg) translateZ(60px);
transform: rotateY(90deg) translateZ(60px);
}
.xf_3d_box .xf_rotate_2 li {
width: 180px;
height: 180px;
}
.xf_3d_box .xf_rotate_2 li:nth-child(1) {
-webkit-transform: translateZ(150px);
transform: translateZ(150px);
}
.xf_3d_box .xf_rotate_2 li:nth-child(2) {
-webkit-transform: rotateX(0) translateZ(-150px);
transform: rotateX(0) translateZ(-150px);
}
.xf_3d_box .xf_rotate_2 li:nth-child(3) {
-webkit-transform: rotateX(-90deg) translateZ(150px);
transform: rotateX(-90deg) translateZ(150px);
display: none;
}
.xf_3d_box .xf_rotate_2 li:nth-child(4) {
-webkit-transform: rotateX(90deg) translateZ(150px);
transform: rotateX(90deg) translateZ(150px);
display: none;
}
.xf_3d_box .xf_rotate_2 li:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(150px);
transform: rotateY(-90deg) translateZ(150px);
}
.xf_3d_box .xf_rotate_2 li:nth-child(6) {
-webkit-transform: rotateY(90deg) translateZ(150px);
transform: rotateY(90deg) translateZ(150px);
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。