Watch 1 Star 8 Fork 2

Apa琦 / 抖音方块相册HTML/CSS

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
抖音上方块相册的源码 spread retract

Clone or download
index.html 4.71 KB
Copy Edit Web IDE Raw Blame History
Apa琦 authored 2019-11-18 15:33 . 提交代码
<!DOCTYPE html>
<meta charset="utf-8" />
background: #000;
height: 100%;
position: relative;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
margin: auto;
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 20s infinite;
animation-timing-function: linear;
@-webkit-keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
.cube div{
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
width: 200px;
height: 200px;
.cube .out_front{
transform: rotateY(0deg) translateZ(100px);
.cube .out_back{
transform: translateZ(-100px) rotateY(180deg);
.cube .out_left{
transform: rotateY(90deg) translateZ(100px);
.cube .out_right{
transform: rotateY(-90deg) translateZ(100px);
.cube .out_top{
transform: rotateX(90deg) translateZ(100px);
.cube .out_bottom{
transform: rotateX(-90deg) translateZ(100px);
.cube span{
display: bloack;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
.cube .in_pic{
width: 100px;
height: 100px;
.cube .in_front{
transform: rotateY(0deg) translateZ(50px);
.cube .in_back{
transform: translateZ(-50px) rotateY(180deg);
.cube .in_left{
transform: rotateY(90deg) translateZ(50px);
.cube .in_right{
transform: rotateY(-90deg) translateZ(50px);
.cube .in_top{
transform: rotateX(90deg) translateZ(50px);
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(50px);
.cube:hover .out_front{
transform: rotateY(0deg) translateZ(200px);
.cube:hover .out_back{
transform: translateZ(-200px) rotateY(180deg);
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(200px);
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(200px);
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
<!--<link rel="stylesheet" href="css/index.css" />-->
<div class="wrap">
<!-- /*包裹所有元素的容器*/-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="img/1.jpg" class="pic"/>
<!--后面图片 -->
<div class="out_back">
<img src="img/2.jpg" class="pic"/>
<!--左图片 -->
<div class="out_left">
<img src="img/3.jpg" class="pic"/>
<div class="out_right">
<img src="img/4.jpg" class="pic"/>
<div class="out_top">
<img src="img/5.jpg" class="pic"/>
<div class="out_bottom">
<img src="img/6.jpg" class="pic"/>
<!--小正方体 -->
<span class="in_front">
<img src="img/7.jpg" class="in_pic" />
<span class="in_back">
<img src="img/8.jpg" class="in_pic" />
<span class="in_left">
<img src="img/9.jpg" class="in_pic" />
<span class="in_right">
<img src="img/10.jpg" class="in_pic" />
<span class="in_top">
<img src="img/11.jpg" class="in_pic" />
<span class="in_bottom">
<img src="img/12.jpg" class="in_pic" />

Comment ( 0 )

Sign in for post a comment


Help Search