3D转换 —— 两面翻转盒子和3d导航栏

3d转换和2d转换的最大区别就是，2d是二维坐标系，是平面的，而3d是三维坐标系，具有空间感、立体感。在3d转换中，有两个特别重要的属性perspective、transform - style。

perspective：透视，也叫视距，就是人眼距离屏幕的距离。距离屏幕越近(透视越小)物体越大，距离屏幕越远(透视越大)物体越小。

1. 透视是写在父级元素上的

2. 透视单位：px

transform-style：3d呈现。该属性是控制子元素是否开启3d效果。默认是不开启的，当属形值为：preserve-3d，则开启3d效果。

3d呈现写在父级元素上，是控制子元素是否保留3d效果。

两面翻转的盒子

前后两个盒子，hover时翻转

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前后翻转导航栏</title><style>body {/* 为了有近大远小的效果 给父级元素添加透视 */perspective: 500px;}.box {position: relative;width: 300px;height: 300px;margin: 100px auto;/* 添加过渡效果 */transition: all 1s;/* 让子元素保持3d呈现 */transform-style: preserve-3d;}.box:hover {transform: rotateY(180deg);}.front,.back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-size: 30px;text-align: center;line-height: 300px;color: #fff;border-radius: 50%;}.front {background-color: pink;z-index: 2;}.back {background-color: purple;/* 先旋转过来 否则当盒子转过来时 文字是反的 */transform: rotateY(180deg);}</style>
</head><body><!-- 旋转box盒子时   后面的盒子显示天天向上 --><div class="box"><div class="front">好好学习</div><div class="back">天天向上</div></div>
</body></html>

上下翻转的3d导航栏

主要就是3d转换的应用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>上下翻转</title><style>* {margin: 0;padding: 0;}ul {list-style: none;margin: 100px;}ul li {float: left;margin: 10px;width: 150px;height: 40px;/* 因为旋转的是li中的box盒子 box盒子也要有立体感 所以给li添加透视 */perspective: 400px;}.box {position: relative;width: 100%;height: 100%;/* 保持子元素的3d效果 */transform-style: preserve-3d;transition: all .5s;}.box:hover {transform: rotateX(90deg);}.top,.bottom {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;line-height: 40px;color: #fff;}.top {background-color: pink;/* 让前面的盒子 向前移动  *//* 立方体的中心点 是旋转的中心点 */transform: translateZ(20px);}.bottom {background-color: purple;/* 下面的盒子 要趴倒 还要向下移动  但是 有位移的时候 一定要把位移写在最前面*/transform: translateY(20px) rotateX(-90deg);}</style>
</head><body><ul><li><div class="box"><div class="top">好好学习</div><div class="bottom">天天向上</div></div></li><li><div class="box"><div class="top">好好学习</div><div class="bottom">天天向上</div></div></li><li><div class="box"><div class="top">好好学习</div><div class="bottom">天天向上</div></div></li><li><div class="box"><div class="top">好好学习</div><div class="bottom">天天向上</div></div></li><li><div class="box"><div class="top">好好学习</div><div class="bottom">天天向上</div></div></li><li><div class="box"><div class="top">好好学习</div><div class="bottom">天天向上</div></div></li></ul>
</body></html>

ok，转换暂时结束到这里。

3D转换 —— 两面翻转盒子和3d导航栏相关推荐

CSS3的2D转换和3D转换，你了解了嘛？
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
前端学习笔记之CSS3新特性3D转换 3.23
1 3D转换概念我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子. 特点: 1.近大远小. 2.物体后面遮挡不可见当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果. 三维坐 ...
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
文章目录 3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transf ...
html3d转换,CSS3 3D 转换
# CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...
带你领略3D转换的魅力~
文章目录一.什么是3D? 二.3D转换的常用属性 1.3D位移:translate3d(x,y,z) 2.3D旋转:rotate3d(x,y,z) 3.透视:perspective 4.3D呈现:t ...
html+css实现页面顶部导航栏
最终效果如下: 接下来,我将从html和css两大部分,逐步为您讲解制作过程目录 Html 实现布局创建父栏目创建子栏目插入外部样式表,为接下来的css编辑做准备 Css 实现样式排布文本, ...
iOS系统中导航栏的转场解决方案与最佳实践
背景目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
前面我们已经介绍过了2D转换,那么我们即将学习的3D转换又是什么呢,它跟2D转换有什么不同呢? 在我们日常生活的环境就是3D的,我们多看到的物体也都是3D的,而我们拍的照片就是3D物体在2D平面中呈现 ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...

3D转换 —— 两面翻转盒子和3d导航栏

两面翻转的盒子

上下翻转的3d导航栏

3D转换 —— 两面翻转盒子和3d导航栏相关推荐

最新文章

热门文章