html+css制作简易3D旋转图册,带悬停hover效果

目录

一.主要思路

二.参考图示和坐标介绍

三.完整参考代码

四.最终效果


一.主要思路

写一个具备宽高的盒子给上边框,并且以这个盒子边以及x、y、z空间坐标的理解展开对图片的移动和旋转

二.参考图示和坐标介绍

我们的视角应该是从z轴的外侧看进去

bb6e712c4a354884be62d7d447752743.png

所以按照这个思路先将图片布局好,再将第二三四五张图片旋转立起来,第六张沿z轴向外移动充当顶部,然后再分别设置几张图片的hover移动效果即可 

6318d36fc94c4c4d95a7008cbceff849.png

三.完整参考代码


Document

四.最终效果

4cb6cd236a14493180decaf685f9d8f1.png

a8ed54add3bf43f19176c82070250982.png


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部