CSS3中的3D变换与简易立方体的制作

大家好，这里是demo软件园，今天为大家分享的是css3中的3d变换。

我们首先要知道在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外。CSS的3d变换中，有以下属性：

A.3D旋转：

CSS3中的3D旋转主要包括四个功能函数
rotateX(angle)、
rotateY(angle)、
rotateZ(angle)、等价于rotate(angle)
rotate3d(x,y,z,angle)，x, y, z分别接受一个数值(number),用来计算矢量方向(direction vector)，矢量方向是三维空间中的一条线, 从坐标系原点到x, y, z值确定的那个点，元素围绕这条线旋转angle指定的值。

B.3D平移：

transform: translate3d(translateX,translateY,translateZ);
translateZ是3D Transformaton特有的，其他两个2D中就有， translateZ 它不能是百分比值; 那样的移动是没有意义的。

C.3D缩放：

transform: scaleZ(number)
transform: scale3d(scaleX,scaleY,scaleZ);
如果只设置scaleZ(number)，你会发现元素并没有被扩大或压缩，scaleZ(number)需要和translateZ(length)配合使用，number乘以length得到的值，是元素沿Z轴移动的距离，从而使得感觉被扩大或压缩。

D.景深：让3D场景有近大远小的效果（我们肉眼距离屏幕的距离），是一个不可继承属性，但他可以作用于后代元素（不是作用于本身的），需要注意的是景深是会叠加的，我们要尽量避免景深叠加。
简单的理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深）。我们来看看有无景深的效果：
无景深效果图：

有景深效果图：

原理：景深越大灭点越远元素变形更小
景深越小灭点越近元素变形更大
（灭点：指的是立体图形各条边的延伸线所产生的相交点，透视点的消失点）
景深基点（视角的位置）：perspective-origin：50% 50%；（默认值）
同perspective属性，也是设置在父元素上，对后代元素起作用。这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置的
使用景深的两种方式：
transform: perspective(depth)：
depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值
若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略
perspective: depth：
同perspective()函数一样，depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。他们唯一的区别是，perspective属性是被用于元素的后代元素，而不是元素本身；就是说，为某个元素设置perspective属性后，是对这个元素的子元素起作用，而不是这个元素本身。

E.transform-style:
这个属性指定了子元素如何在空间中展示,营造有层级的3d舞台，只有两个属性值：flat（默认）和preserve-3d.
flat :表示所有子元素在2D平面呈现，
preserve-3d :表示所有子元素在3D平面呈现，
如果被扁平化，则子元素不会独立的存在于三维空间。它是一个不可继承属性，作用于子元素。

F.隐藏背面：
backface-visibility属性用来设置，是否显示元素的背面，默认是显示的。
backface-visibility: keyword;
keyword有两个值，hidden和visible，默认值是visible。
最后，我们根据3d变换基础知识制作简易旋转立方体，代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#wrap{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 300px;height: 300px;border: 1px solid;perspective: 200px;}#wrap > .box{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;transition:4s ;transform-style: preserve-3d;transform-origin: center center -50px; }#wrap > .box > div{position: absolute;width: 100px;height: 100px;background: rgba(123,123,123,.2);text-align: center;font: 50px/100px "微软雅黑";transform-origin: center center -50px;/* backface-visibility: hidden; */}#wrap > .box > div:nth-child(6){transform: rotateX(270DEG);}#wrap > .box > div:nth-child(5){transform: rotateX(90DEG);}#wrap > .box > div:nth-child(4){transform: rotateY(90DEG);}#wrap > .box > div:nth-child(3){transform: rotateY(270DEG);}#wrap > .box > div:nth-child(2){transform: rotateY(180DEG) rotate(180DEG);}#wrap > .box > div:nth-child(1){}#wrap:hover > .box{transform: rotate3d(1,2,3,720deg);}</style></head><body><div id="wrap"><div class="box"><div>前</div><div>后</div><div>左</div><div>右</div><div>上</div><div>下</div></div></div></body>
</html>

效果图：

好了，今天的分享就到这里，当然，可能存在些许错误望大家海涵并在评论区多多指正交流，谢谢大家花费时间阅览！

CSS3中的3D变换与简易立方体的制作相关推荐

css3中的3d元素
景深 perspective(n)为 3D 转换元素定义透视视图 perspective的中文意思是:透视,视角. 没有透视定义,不成3D. 下图为透视的一张图: CSS3中3D transform的 ...
html3d旋转发光立方体,纯css3实现的3D立体动态旋转立方体特效
CSS3 3D立方体多边形动画特效 - 代码笔记 *{ margin:0 auto; padding:0; } @keyframes rotate{ 0%{ transform:rotateX(0de ...
css3中做3D导航栏
看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...
深入理解css3 3d变换
转载地址:https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ ...
CSS3 Transform 【3D 】
三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能相当类似.CSS3中的3D变换主要包括以下几种功能函数: 3D位移:CSS3中的3D位移主要包括trans ...
CSS3的2D、3D变换、过度与动画效果
1. 2D转换方法在2D转换方法中,存在对元素进行旋转.缩放.拉伸.移动的属性效果.此处主要讲解transform属性中的旋转和缩放.位移效果. 1.1 旋转rotate() 通过下述代码的设置可以 ...
使用ThreeJS在浏览器中展示3D物件
这是一篇介绍如何在浏览器中展示洗面奶3D物件的文章. 前言这篇文章仅仅是向你介绍应对下面这种的场景的方法:如果有人突然跟你说,你的皮肤挺不错的耶,你用的什么洗面奶,我也想买一个,你会怎么回答呢?手头 ...
21-CSS中的3D属性
文章目录一.什么是3D 二.景深三.3D旋转四.3D缩放一.什么是3D 2D场景是在屏幕上水平和垂直的交叉线x轴和y轴 3D场景,是垂直于屏幕的方向,相对于3D多出个z轴 Z轴:靠近屏幕的方向 ...
CSS3动画之3D动画
所有东西一跟3D扯上关系,复杂指数都是噌噌噌往上走.不过也正常,毕竟多了一个维度,要有三维应有的尊严. 3D Transforms要怎么写?能写翻牌效果吗?能写翻书效果吗?能写出立体书的效果吗?点进来 ...

CSS3中的3D变换与简易立方体的制作

大家好，这里是demo软件园，今天为大家分享的是css3中的3d变换。

CSS3中的3D变换与简易立方体的制作相关推荐

最新文章

热门文章