Ready to 520, are you ready to give your girlfriend a gift? As programmers, you’d better write a cool piece of code that shows off both your skills and your love. Why not?

Without further ado, directly on the effect map (because of the picture effect limitation, so can not hd)



In fact, this 3D album is not so difficult, have learned the front-end code to know that HTML5 can be done. It’s a little square on the inside and a big square on the outside. And then you add transparency, and then you add rotation.

Add mouse hover check. Bounce the large square open to reveal the small one.

The main code is as follows :(only CSS styles are written here)

/* Define a small cube style */
.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(- 90.deg) translateZ(50px);
}
.cube .in_top{
	transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
	transform: rotateX(- 90.deg) translateZ(50px);
}
/* Mouse over style */
.cube:hover .out_front{
	transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
	transform: translateZ(- 200.px) rotateY(180deg);
}
.cube:hover .out_left{
	transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
	transform: rotateY(- 90.deg) translateZ(200px);
}
.cube:hover .out_top{
	transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
	transform: rotateX(- 90.deg) translateZ(200px);
}
Copy the code

Complete code, please move to the public number: poetic code