1.2D

2D坐标轴

                    （负）（负）—|———————————————➡X轴（正）|||||⬇ Y轴（正） ​ X轴：水平，向右为正，向左为负 Y轴：垂直，向下为正，向上为负

2D缩放

transform: scale() 缩放 ​ - transform: scale(x,y) 沿着x轴和y轴缩放 - transform: scaleX(x) 沿着x轴缩放 - transform: scaleY(y) 沿着y轴缩放 ​ > 取值范围0~1之间表示缩小，1表示正常大小，1以上表示放大，默认值为1 > 取值为负值表示先翻转后缩放 > > 为一个值的时候，沿着水平方向和垂直方向等比例缩放

2D旋转

### ​ * transform: rotate(ndeg) 旋转* 语法* transform：rotate(deg);沿着中心点旋转，默认值* transform: rotateX(deg);沿着X轴旋转* transform: rotateY(deg);沿着Y轴旋转ju单位：deg当角度值为正数时，元素沿着顺时针方向旋转当角度值为负数时，元素沿着逆时针方向旋转 ​ ​ ​ ​

设置元素基点位置

位移不能使用 ​ * transform-origin: 水平方向 垂直方向; ​ * 设置元素的基点位置，设置围绕哪个点进行变化 ​ * 取值 ​px ​关键字 ​水平：left center right垂直：top center bottom ​ - 说明：两个空格隔开的值，分别表示x,y轴的原点一个值时，另一个值默认center - 可为负数 ​ > 必须与transform属性配合使用 > > 位移不能用

旋转，位移，缩放，的复合写法

属性之间用空格隔开，先位移再旋转 ​.wrap:hover .box1 {transform: rotate(135deg);transform: translate(50px);transform: scale(1.5);/* 复合 先位移再旋转*/transform: translate(100px) rotate(120deg) scale(1.5);}

2.3D效果

/* 创建3d网页 */.wrap {/* 800px -1000px */perspective: 800px;} - perspective属性：景深（透视），属性值为透视点到元素的距离，近大远小；也可以让网页产生3D效果，单位像素 ​一般取值：800px-1000pxperspective：800px 就是人离屏幕800px 的地方观看这个div元素。近大远小 一般设置给父元素或者body

3.高宽自适应

网页布局中经常要定义元素的宽高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。 ​ 宽度自适应 元素宽度的默认值为{wieth：auto}或者不设置 高度自适应 元素高度的默认值为{height：auto}或者不设置 ​ ​

4.3d坐标轴

x轴：水平 向右为正，向左为负 y轴：垂直 向下为正，向上为负 z轴：垂直于屏幕，向外为正，向内为负

3D位移

transform: translateZ(900px);transform: translateZ(300px);transform: translateZ(-300px); ​/* 位移的3d函数 值之间用逗号隔开 */transform: translate3d(100px, 200px, 300px);/* transform: translateX(100px) translateY(200px) translateZ(300px); */

父子外间距塌陷

当子元素设置 margin-top的时候，子元素与父元素没有产生上外间距，此时上外间距会叠加给父元素 ​当子元素和父元素同时具有上外间距，子元素与父元素没有产生上外间距,外间距会叠加给父元素,子元素的上外间距和父元素的上外间距值，取最大值解决方法：1.给父元素设置overflow: hidden;2.给父元素设置1px的上边框或者1px的上内填充3.规避margin，巧用padding

兄弟关系塌陷解决方法

 现象：兄弟关系元素，当遇到垂直外间距的时候，外间距会叠加取值情况：值一样 取一个值值不样 取最大值 ​解决方法：给两个元素套一个父元素，设置溢出隐藏 ​ ​

3D旋转

- transform: rotateZ(a); 沿着Z轴方向旋转 ​ - a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；反之，如果为负值，元素围绕 Z 轴逆时针 ​旋转。 ​ - transform: rotate3d(x,y,z,angle); ​ - 参数： ​x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。 ​y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。 ​z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。 ​angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时 ​ ​ ​ 1、两个值为零，定义X,Y,Z轴旋转 rotate3d(1,0,0,angle)   x轴旋转 rotate3d(0,1,0,angle)   y轴旋转 rotate3d(0,0,1,angle)   z轴旋 ​ /* 沿着x轴方向旋转 */ transform: rotateX(-45deg); transform: rotate3d(1,0,0,-45deg); ​ /* 沿着y轴方向旋转 */ transform: rotateY(-45deg); transform: rotate3d(0,1,0,-45deg); ​ /* 沿着z轴方向旋转 */ transform: rotateZ(-45deg); transform: rotate3d(0,0,1,-45deg); ​ ​ 2、两个值不为零，定义多轴旋转 rotate3d(1,0.5,0,30deg) ​ x 1*30   30deg ​ y 0.5*30 15deg ​ z 0*0     0deg ​ .box5:hover img {/* z */transform: rotate3d(.5, 1, 0, 60deg);/* x:0.5*60=30degy:1*60=60degz:0*60=0deg ​*/ } 3、三个值不为零，定义多轴旋转 ​ .box6:hover img {/* z */transform: rotate3d(.5, 1, 1, 60deg);/* x:0.5*60=30degy:1*60=60degz:1*60=60deg ​*/ }

3D必备属性

- transform-style: preserve-3d; 创建3d空间 ​ - 什么时候搭建3d舞台？ ​- 父元素有3D变形，子元素也有3D变形 ​ - perspective属性：景深（透视），属性值为透视点到元素的距离，近大远小；也可以让网页产生3D效果，单位像素 ​ ​ 一般取值：800px-1000px perspective：800px 就是人离屏幕800px 的地方观看这个div元素。 当translateZ的大小临近与800px时图片离我们越来越近了 当它大于800px时，这个图片就消失了 ​ 反之当translateZ为负值时，我们可以看到图片变小了，也就是图片离人越来越远了。 ​ ​ preserve-3d， 如果搭配overflow: hidden/scroll/auto使用，相当于2D效果 .transform-style属性和perspective属性放在父元素中,有时候perspective属性放在body中 ​

总结

以上是生活随笔为你收集整理的css2D、3D详解的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。