H5/C3实践(2) --3D导航栏旋转木马

6、3D导航栏

创建两个盒子

<div class="box"><div class-"front">111111</div><div class="back" >222222</div>
</div>

.box {position: relative;width: 225px;height: 225px;border-radius: 50%;transform-style: preserve-3d;background-color: rgb(177, 174, 158);transition: all 1s linear 0.1s;
}
.front,.back {position: absolute;top: 50%;left: 50%;height: 200px;width: 200px;margin: -102px 0 0 -102px; border-radius: 50%;}
.front {overflow: hidden;z-index: 1;
}
.back {font-size: 30px;text-align: center;color: #000;transform: rotateY(180deg);background-color: rgb(8, 233, 138);
}
.box:hover {transform: rotateY(180deg);
}

box父盒子里面包含前后两个子盒子。
box是翻转的盒子front是前面盒子back是后面盒子。

将盒子设置定位，并且重叠。
将被底部的盒子沿X轴旋转-90度
将父级盒子沿X轴旋转90度

7、旋转木马

原理：确定一根主轴，所有图片围绕主轴转，图片距离主轴的长度相同。

创建盒子

<section><div></div><div></div><div></div><div></div><div></div><div></div>
</section>

将各个盒子与中心线的距离拉开（距离相同）

.photos div:nth-child(2) {transform: rotateY(40deg) translateZ(400px);
}

先旋转，再移动距离。

举例：

<section class="photos1"><div><img src="photos/1/1.jpg" alt="照片"></div><div><img src="photos/1/2.jpg" alt="照片"></div><div><img src="photos/1/3.jpg" alt="照片"></div>
</section>

section {position: relative;width: 300px;height: 200px;margin: 20px auto;transform-style: preserve-3d;animation: rotateY 20s linear  infinite;
}
section div {overflow: hidden;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
section div img {width: 100%;height: 100%;transition: all 0.5s linear 0.1s;
}
section div img:hover {transform: scale(1.2);
}.photos1 {background: url(../photos/1/main.jpg);background-size: 100%;z-index: 4;
}
.photos1 div:nth-child(1) {transform: rotateY(0deg) translateZ(200px);
}
.photos1 div:nth-child(2) {transform: rotateY(120deg) translateZ(200px);
}
.photos1 div:nth-child(3) {transform: rotateY(240deg) translateZ(200px);
}

H5/C3实践(2) --3D导航栏旋转木马相关推荐

HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
前面我们已经介绍过了2D转换,那么我们即将学习的3D转换又是什么呢,它跟2D转换有什么不同呢? 在我们日常生活的环境就是3D的,我们多看到的物体也都是3D的,而我们拍的照片就是3D物体在2D平面中呈现 ...
css3中做3D导航栏
看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...
前端小案例之3D导航栏
简单3D导航栏案例-鼠标经过盒子时底部盒子旋转最近入门学习前端用简单的html结构加CSS样式写了个3D导航栏的小案例在这里分享给大家. 文章目录简单3D导航栏案例-鼠标经过盒子时底部盒子旋转一 ...
3D转换 —— 两面翻转盒子和3d导航栏
3d转换和2d转换的最大区别就是,2d是二维坐标系,是平面的,而3d是三维坐标系,具有空间感.立体感.在3d转换中,有两个特别重要的属性perspective.transform - style. p ...
使用HTML+Css+transform实现3D导航栏-小白进阶必备
3D是three-dimensional的缩写,就是三维图形.在计算机里显示3D图形,就是说在平面里显示三维图形.不像现实世界里,真实的三维空间,有真实的距离空间.计算机里只是看起来很像真实世界,因此 ...
3D导航栏翻转(css)
先上效果图搭建html框架 <ul><li><div class="box"><div class="front"& ...
html+css3 3d导航栏
效果图参考于https://www.bilibili.com/video/BV1xq4y1q7jZ?p=37 如有侵权还请速速联系 1.html部分 <div class="navs ...
JQuery制作3D导航栏切换动画
<!-- 注意的地方 1.position 的 relative 和 absolute 联合使用的作用和效果 : absolute 绝对定位(1.默认从对窗口的左上角开始,2.也可以对某一个 d ...
HBuilderX Wap2App(H5)打包APP去除顶部导航栏
自己收藏方便以后用,原文链接. 修改sitemap.json {"global" : {"webviewParameter" : {"titleNVi ...

H5/C3实践(2) --3D导航栏旋转木马

6、3D导航栏

7、旋转木马

H5/C3实践(2) --3D导航栏旋转木马相关推荐

最新文章

热门文章