3D stereo photo album, Valentine's day, couple birthday gift code applicable

3d Stereo album , Valentine's Day , Couple birthday gift code applies

I don't say much nonsense , Go straight to the renderings （ Because the picture effect is limited , So it can't be HD ）

Actually this 3d Photo albums are not that hard , Anyone who has studied front-end code knows how to use html5 It can be done . In theory, it is a small square inside , A big square outside . Then add the transparency adjustment , Plus the rotation, you can do it .

Add the mouse hover check . Pop open the square

The main codes are as follows ：

/* Define small cube styles */
.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);
}
/* After the mouse moves in the style */
.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);
}

Copy

In fact, they are all controlled by front-end code , It is the same to make wechat applet directly .

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/2859.html Link to the original text ：https://javaforall.cn