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详解相关推荐

plot参数详解python_30行Python代码实现3D数据可视化
作者:潮汐来源:Python技术欢迎来到编程教室~ 我们之前的文章中有讲解过不少 Matplotlib 的用法,比如: 完成这50个Matplotlib代码,你也能画出优秀的图表 25个常用Mat ...
《Unity 4 3D开发实战详解》一6.7 物理引擎综合案例
本节书摘来异步社区<Unity 4 3D开发实战详解>一书中的第6章,第6.7节,作者: 吴亚峰 , 杜化美 , 张月霞 , 索依娜责编: 张涛,更多章节内容可以访问云栖社区" ...
python如何做散点图-matplotlib在python上绘制3D散点图实例详解
大家可以先参考官方演示文档: 效果图: ''' ============== 3D scatterplot ============== Demonstration of a basic scatte ...
python画三维温度散点图-matplotlib在python上绘制3D散点图实例详解
大家可以先参考官方演示文档: 效果图: ''' ============== 3D scatterplot ============== Demonstration of a basic scatte ...
python绘制散点图-matplotlib在python上绘制3D散点图实例详解
大家可以先参考官方演示文档: 效果图: ''' ============== 3D scatterplot ============== Demonstration of a basic scatte ...
《转》探讨:3D透视投影变换详解-兼谈视平面和屏幕的宽高比问题
<转>探讨:3D透视投影变换详解-兼谈视平面和屏幕的宽高比问题原文:http://www.cnblogs.com/soroman/archive/2006/09/17/509598.ht ...
《Unity 3D 游戏开发技术详解与典型案例》——1.3节第一个Unity 3D程序
本节书摘来自异步社区<Unity 3D 游戏开发技术详解与典型案例>一书中的第1章,第1.3节第一个Unity 3D程序,作者吴亚峰 , 于复兴,更多章节内容可以访问云栖社区" ...
Halcon例程（基于3D形状匹配识别方法）详解 —— create_shape_model_3d_lowest_model_level.hdev
一.例程简介最近在研究3D识别方面的东西,查了不少资料,发现halcon里有不少关于三维物体识别的例程,这里对其中一个做出详解.该例程是基于三维匹配方法的,因为有三维模型SM3,所以不需要自己创建: ...
python绘制3d坐标轴_matplotlib在python上绘制3D散点图实例详解
大家可以先参考官方演示文档: 效果图: ''' ============== 3D scatterplot ============== Demonstration of a basic scatte ...
如何用PPT来实现三维3D效果，附参数设置详解
原文链接: 如何用PPT来实现三维3D效果,附参数设置详解

css2D、3D详解

1.2D

2D坐标轴

2D缩放

2D旋转

设置元素基点位置

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

2.3D效果

3.高宽自适应

4.3d坐标轴

3D位移

父子外间距塌陷

3D旋转

3D必备属性

css2D、3D详解相关推荐

最新文章

热门文章