天天育儿网 > html+css制作简易3D旋转图册带悬停hover效果

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

时间：2021-02-20 00:37:28

一.主要思路

二.参考图示和坐标介绍

三.完整参考代码

四.最终效果

一.主要思路

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

二.参考图示和坐标介绍

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

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

三.完整参考代码

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{perspective: 800px; /*调整设定自己和z方向平面的距离，使3D元素具有透视性拥有更强的立体效果，值>0表示3D元素比原来的大，反之则小*/}@keyframes my3D {from{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}to{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}/*设置全方位旋转*/}.all{position: relative;width: 200px;height: 200px;/* border: 1px solid red; */transform-style: preserve-3d;/*指定使用3D效果*/margin-top: 200px;margin-left: 200px;animation: my3D 5s linear 0s infinite normal;/*调用动画属性，设置动态效果*/}.all>div{width: 200px;height: 200px;background-size: 200px 200px;position: absolute;}.all div:first-child{background-image: url("狼.png");/*与框重合的第一张图片，充当底部*/}.all div:nth-child(2){background-image: url("狼.png");/*框左侧图片*/left: -200px;transform-origin: right;transform: rotateY(90deg);/*以图片右侧(y轴方向)充当旋转轴向右旋转90度，立起来充当左侧*/}.all div:nth-child(3){background-image: url("狼.png");/*框右侧图片*/right: -200px;transform-origin: left;transform: rotateY(-90deg);/*以图片左侧(y轴方向)充当旋转轴向左旋转90度，立起来充当右侧*/}.all div:nth-child(4){background-image: url("狼.png");/*框上方图片*/top: -200px;transform-origin: bottom;transform: rotateX(-90deg);/*以图片底部(x轴方向)充当旋转轴向后旋转90度，立起来充当上边*/}.all div:nth-child(5){background-image: url("狼.png");/*框下方图片*/bottom: -200px;transform-origin: top;transform: rotateX(90deg);/*以图片上边(x轴方向)充当旋转轴向前旋转90度，立起来充当下边*/}.all div:last-child{background-image: url("狼.png");/*与框重合的第一张图片*/transform: translateZ(200px);/*以底部框为标准按z轴方向移动200px，充当顶部*/}.all:hover > div:first-child{transform: translateZ(-100px);/*底部图片z轴为基准向内移动100px*/}.all:hover > div:nth-child(2){transform: translateX(-100px) rotateY(90deg);/*左侧图片以x轴为基准向左移动100px，并旋转方向*/}.all:hover > div:nth-child(3){transform: translateX(100px) rotateY(-90deg);/*右侧图片以x轴为基准向右移动100px，并旋转方向*/}.all:hover > div:nth-child(4){transform:translateY(-100px) rotateX(-90deg);/*上侧图片以y轴为基准向上移动100px，并旋转方向*/}.all:hover > div:nth-child(5){transform:translateY(100px) rotateX(90deg);/*下侧图片以y轴为基准向下移动100px，并旋转方向*/}.all:hover > div:last-child{transform: translateZ(300px);/*顶部图片以z轴为基准，向外移动300px*/}</style></head><body><div class="all"><div></div><div></div><div></div><div></div><div></div><div></div></div></body></html>