3d立體相冊，情人節，情侶生日禮物代碼適用
廢話不多說，直接上效果圖（因為圖片效果限制，所以不能高清）
其實這個3d相冊并沒有那么的難，學過前端代碼的都知道用html5可以做出來，理論上也就是里面一個小正方形，外面一個大的正方形，然后加上透明度調整，再加上旋轉就可以做出來，
加上滑鼠的懸浮檢查，彈開打的正方形
主要代碼如下：
/*定義小正方體樣式*/
.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);
}
其實都是前端代碼控制的，直接做出微信小程式也是相同的道理，
有想要完整原始碼的小伙伴可以加我
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/265941.html
標籤：其他
上一篇：第三方短信請求
下一篇：localforage 是什么？