CSS之transform 2D 与 3D 转换(十五)

CSS transform 2D 与 3D 转换

    • 1、transform 属性
      • 1.1、transform 的 2D 变换函数
      • 1.2、transform 的 3D 转换属性值
    • 2、2D 转换
      • 2.1、translate 位移
        • 2.1.1、translate(x,y)
        • 2.1.2、translateX(x) 和 translateY(y)
      • 2.2、实现元素水平垂直居中
      • 2.3、scale 缩放
        • 2.3.1、scale(x,y)
        • 2.3.2、scaleX(x) 与 scaleY(y)
      • 2.4、skew 斜切
      • 2.5、rotate 旋转
      • 2.6、transform-origin
        • 2.6.1、关键字表示
        • 2.6.2、数值表示法
        • 2.6.3、百分比表示
        • 2.6.4、scale 与 skew 都可以设置其变换原点
      • 2.7、2D 转换综合写法顺序问题
    • 3、3D 转换
      • 3.1、perspective 透视
      • 3.2、translate 3D 位移
        • 3.2.1、translateZ(z)
        • 3.2.2、translate3d(x,y,z)
      • 3.3、rotate 3D 旋转
      • 3.4、transform-style
    • 4、总结
      • 4.1、变换函数
      • 4.2、重要属性
      • 4.3、注意事项

该文主要讲解了围绕transform属性展开的2D转换,3D转换等一系列相关属性的用法及注意事项。

1、transform 属性

在 CSS 中,利用 transform 这个属性实现对元素进行旋转,缩放,倾斜或平移;
 
transform 属性的值可以是 none 或一个或多个 css 变换函数;
 
transform 的值不是 none 时,元素会创建自己的层叠上下文。

1.1、transform 的 2D 变换函数

属性值 描述 实例
translate(x,y) x,y 为长度单位,可以是 px,也可以是百分比%, x 表示元素在 x 轴上的移动量 y 表示元素在 y 轴上的移动量,如果 y 值不写,则默认为 0,例如 translate(10px)表示 translate(10px,0) transform:translate(100px,200px)
translateX(x) x 为长度单位,可以是 px,也可以是百分比% 表示元素在平面 x 轴上的位移量 transform:translateX(300px)
translateY(y) y 为长度单位,可以是 px,也可以是百分比% 表示元素在平面 Y 轴上的位移量 transform:translateY(200px)
rotate(ax) ax 代表旋转的角度 正角表示顺时针旋转 负角表示逆时针旋转 transform:rotate(30deg)
scaleX(x) x 数字类型,表示元素在 x 轴上的缩放比 transform:scaleX(2)
scaleY(y) y 数字类型,表示元素在 y 轴上的缩放比 transform:scaleY(2)
scale(x,y) x 数字类型,表示元素在 x 轴上的缩放比 y 数字类型,表示元素在 y 轴上的缩放比 当只有 x,没有 y 时,则 y 默认为 x,元素在 x,y 轴上均匀缩放 transform:scale(2,3)
skew(ax,ay) ax 表示一个角度,表示沿着 x 横坐标扭曲元素的角度 ay 表示一个角度,表示沿着 y 纵坐标扭曲元素的角度 transform:skew(30deg,30deg)
skewX(ax) ax 表示一个角度,表示沿着 x 横坐标扭曲元素的角度,形成水平拉伸效果 transform:skewX(30deg)
skewY(ay) ay 表示一个角度,表示沿着 y 纵坐标扭曲元素的角度,形成垂直拉伸效果 transform:skewY(30deg)

1.2、transform 的 3D 转换属性值

属性值 描述 实例
translateZ(z) z 为 px 长度单位 元素在 3D 空间 z 轴方向上的位移量 transform:translateZ(200px)
translate3d(x,y,z) x,y,z 分别为 px 长度单位, x 表示元素在 x 轴坐标上的位移量, y 表示元素在 y 轴坐标上的位移量,z 表示元素在 z 轴坐标上的位移量,该值不能使用百分比,如果使用会被认为是无效属性 transform:translate3d(50px,30px ,50px)
rotateX(ax) 表示元素绕X轴旋转一定的角度 ax 表示度数,可以为正,也可以为负 transform:rotateX(30deg);
rotateY(ay) 表示元素绕Y轴旋转一定的角度 ay 表示度数,可以为正,也可以为负 transform:rotateY(30deg)
rotateZ(az) 表示元素绕Z轴旋转一定的角度 ax 表示度数,可以为正,也可以为负 transform:rotate(30deg);

2、2D 转换

注意:

  • 元素的左上角坐标为 (0,0);
  • (0,0)坐标的右方,为 x 轴的正方向;
  • (0,0)坐标的下方,为 y 轴的正方向。

2.1、translate 位移

css 中通过给transform添加translate(x,y)translateX(x)translateY(y)来实现元素的水平或垂直位移。

属性值 描述 举例
translate(x,y) 实现元素水平和垂直位移量 translate(30px,50px)
translateX(x) 实现元素水平位移量 translateX(30px)
translateY(y) 实现元素垂直位移量 translateY(50px)

2.1.1、translate(x,y)

x 和 y 是长度值 length,可以是 px,也可以是%百分比;
 
x 表示元素在 x 轴上的位移量,为正表示向右移动,为负表示向左移动;
 
y 表示元素在 y 轴上的位移量,为正表示向下移动,为负表示向上移动;
 
位移和相对定位非常像,位移变形也会 “老家留坑”,即会占据原来的位置;
 
同时不会对其它元素造成影响,相当于悬浮在其它元素上面。

/* x,y 为px长度单位 */
transform: translate(50px, 50px); /* 元素水平向右移动50px,向下移动50px */

/* x,y 为%百分比 */
/* 在标准盒子模型下:
	水平位移 =(width + 左右 padding + 左右 border) * x%
	垂直位移 =(height + 上下 padding + 上下 border) * y%
*/
transform: translate(50%, 50%);

/* y 值不写,默认为0:
	transform:translate(10px) 等同于 transform:translate(10px,0)
	只有x发生位移,y轴上不发生移动
*/
transform: translate(10px);

2.1.2、translateX(x) 和 translateY(y)

/*
	transform:translate(x) 等同于translateX(x)
	transform 后面如果跟多个变换函数,则各函数之间用空格隔开
	本质上 translate(x,y) 是 translateX 与 translateY 两者的复合写法
*/
transform: translate(x);
transform: translateX(x); /* 实现元素在 X 轴的位移量 */
transform: translateY(y); /* 实现元素在 Y 轴的位移量 */
transform: translateX(x) translateY(y);

2.2、实现元素水平垂直居中

/* 
	先利用绝对定位
	让元素的顶部和左侧分别与父元素垂直和水平中间对齐
	然后再利用translate,让元素向上和向左移动自身宽度的一半
	这样就实现了水平和垂直居中
*/
position: absolute;
top: 50%;
left: 50%;
/* 向左和向上分别移动元素自身宽和高的一半 */
transform: translate(-50%, -50%);

2.3、scale 缩放

css 中通过给transform添加scale(x,y)scaleX(x)scaleY(y)来实现元素的宽高缩放效果

2.3.1、scale(x,y)

x,y 都是数字类型,也可以用百分比%表示,分别表示元素的宽和高缩放比;
 
当 x,y 的值 >1 时,表示放大;<1 时,表示缩小; =1 表示不变;
 
当只有 x,没有 y 时,则 y 默认为 x,元素宽高同时均匀缩放。

/* 宽放大2倍,高放大3倍 */
transform: scale(2, 3);
/* 宽缩小0.5倍,高放大2倍 */
transform: scale(0.5, 2);
/* 宽高同时放大2倍 */
transform: scale(2);
/* 在标准盒子模型下:
	相对于元素的可视宽和可视高而言
	宽缩放后大小 =(width + 左右 padding + 左右 border)  * x%;
	高缩放后大小 =(height + 上下 padding + 上下 border) * y%;
*/
transform:scale(30%,50%);

2.3.2、scaleX(x) 与 scaleY(y)

/*
	transform:scale(x,y) 同等于 transform:scaleX(x) scaleY(y);
	本质上 scale(x,y)是 scaleX(x) 与 scaleY(y)的复合写法
*/
transform: scaleX(x) scaleY(y);

2.4、skew 斜切

css 中通过给 transform 添加 skew(ax,ay)skewX(ax)skewY(ay) 变换函数来实现元素斜切效果:
 
skewX(ax):用于水平拉伸,使元素的每个点在水平方向上扭曲一定角度
 
skewY(ay):用于垂直拉伸,使元素的每个点在垂直方向上扭曲一定角度
 
skew(ax,ay):用于水平和垂直拉伸,使元素在水平和垂直方向上扭曲一定角度
 
ax:表示一个角度,用来表示沿着横坐标扭曲元素的角度
 
ay:表示一个角度,用来表示沿着纵坐标扭曲元素的角度

/* X轴斜切 30deg */
skewX(30deg);
/* Y轴斜切 50deg */
skewY(50deg);
/* X轴斜切 30deg Y轴斜切50deg*/
skew(30deg,50deg)
/* ax和ay可以用负值 */

2.5、rotate 旋转

css 中通过 transform:rotate(ax) 来实现元素旋转效果
 
ax 表示旋转的角度,比如 rotate(45deg)
 
ax 为正,表示顺时针方向旋转
 
ax 为负,表示逆时针方向旋转

  .item1 {
    /* 顺时针旋转到30deg */
    transform: rotate(30deg);
  }
  .item2 {
    /* 逆时针旋转到30deg */
    transform: rotate(-30deg);
  }
  .item3 {
    /* 顺时针旋转到180deg */
    transform: rotate(180deg);
  }
  .item4 {
    /* 顺时针旋转30deg */
    transform: rotate(450deg);
  }

2.6、transform-origin

transform-origin 属性,设置元素的变换原点,即元素在变换时是以围绕哪个点来发生变换的
 
默认值:transform-origin:50% 50% 0;(元素的中心)

/*
	x: 表示x轴的坐标位置
	y: 表示y轴的坐标位置
	z: 表示z轴的坐标位置 
*/
transform-orign: x y z;
/*  注意:
    x , y 的值,可以是长度值(px 或百分比%)还可以是预设的关键词
    z 的值只能是长度值 px 
*/

2.6.1、关键字表示

关键词(left、right)与(top、bottom) 与 center 三组中任意一个与另一组中的一个关键字组合来表示;
 
元素的默认变换原点为元素的中间位置 transform-origin:center;

关键 字 描述
left 原点为元素左边中间位置,同left center一样
right 原点为元素右边中间位置,同right center一样
top 原点为元素上边中间位置,同top center一样
bottom 原点为元素下边中间位置,同bottom center一样
center 原点为元素中间位置,同center center一样
top left 原点为元素左上角,相当于坐标(0 0)
top right 原点为元素右上角
left bottom 原点为元素左下角
right bottom 原点为元素右下角

2.6.2、数值表示法

/* 
  x , y 为长度单位(px 或百分比%) 
  当 y 省略不写时,默认为元素的垂直中心点 
*/
transform-origin: x y;

/* 变换原点:为左上角 */
transform-origin: 0 0;
/* 变换原点为:x轴20px 与y轴30px相交的位置 */
transform-origin: 20px 50px;
/* 变换原点:为上边的中间点 */
transform-origin: 0;

2.6.3、百分比表示

  .item1 {
    /* 百分比相对的是元素自身的可视宽和可视高而言,旋转的原点 */
    transform-origin: 100%;
  }
  .item2 {
    transform-origin: 50%;
  }
  .item3 {
    transform-origin: 100% 0%;
  }
  .item4 {
    transform-origin: 100% 100%;
  }
  .item5 {
    transform-origin: 100% 50%;
  }

2.6.4、scale 与 skew 都可以设置其变换原点

元素默认的转换原点为元素的中心点:transform-origin:50% 50%;

2.7、2D 转换综合写法顺序问题

/*
同时使用多个转换,其多个转换函数之间用空格隔开;
转换函数的顺序会影响转换的效果,比如:先旋转会影响坐标轴方向;
当我们需要同时位移和旋转时,需要注意位移和旋转的书写顺序,因为先旋转会影响到元素的坐标轴方向。
*/
transform: translate() rotate() scale();

3、3D 转换

元素的左上角坐标为(0,0,0)
 
x 轴右边为正方向,y 轴的下方为正方向
 
z 轴垂直电脑屏幕,射向我们的那一头为正方向
 

CSS之transform 2D 与 3D 转换(十五)_第1张图片

3.1、perspective 透视

没有透视定义,不成 3D;
 
透视是指在平面上描绘物体的空间关系的方法或技术;
 
要在平面上描绘物体的空间立体感,需要遵顺透视原理中的 近大远小 的规则;
 
当一个物体离我们越近,我们看到他会比离我们远的时候要大。
 
视点: CSS3 中 3D transform 的 透视点 (视点) 是在浏览器的前方!
 

CSS之transform 2D 与 3D 转换(十五)_第2张图片

perspective 属性:

在 css3 中,用 perspective 属性来设置透视距,即模拟人站在离屏幕多远的地方来看电脑上显示的元素;
 
比如 perspective:800px; 意思就是在离屏幕 800px 的地方看到这个元素;
 
如果元素往 Z 轴正方向 移动,离我们越近,看到物体就越大;
 
如果元素往 Z 轴负方向 移动,离我们越远,看到的物体就越小;
 
perspective 这个属性要设置在 父元素上面。

3.2、translate 3D 位移

translateX(x) 表示水平方向(x 轴)的位移量,与 2D 位移是一样的效果
 
translateY(y) 表示垂直方向(y 轴)的位移量,与 2D 位移是一样的效果
 
translateZ(z) 表示垂直于电脑屏幕方向(z 轴)的位移量
 
translate3d(x,y,z) 表示元素在 x,y,z 三个坐标上的位移量,用来称动元素在 3D 空间中的位置

3.2.1、translateZ(z)

/* 我们要能看到 3D 的效果,必需要配合`perspective` 属性,`perspective`属性用来定义透视强度。 */
/* 视距为300px  相当于模拟人站在离电脑屏幕300px的位置看这个元素 */
perspective: 300px;

当 perspective 的值为 300px,则 300px 就会成为当下显示效果的基准。在这个基准下:

  • translateZ=0 图形大小正常显示
  • 0< translateZ<300 图形变大
  • translateZ>=300 图片不见,相当于图片在你的后面,你肯定是看不见的了
  • translateZ<0 图形变小

注意:

  • perspective:300px;时,向前移动100px,离元素还差200px
  • perspective:900px;时,向前移动100px,离元素还差800px
  • perspective:300px时看到的要比perspective:900px时的更大。
  • 其向后移动 100px,则看到的更小,原理类似

3.2.2、translate3d(x,y,z)

  • 表示元素在 x,y,z 三个坐标上的位移量,用来移动元素在 3D 空间中的位置;
  • z 的值不能使用百分比,如果使用会被认为是无效属性。

3.3、rotate 3D 旋转

css 中通过给 transform 添加下如下变换函数值来实现 3D 旋转效果:

属性值 描述
rotateX(ax) 表示元素绕X轴旋转一定的角度 ax 表示度数,可以为正,也可以为负
rotateY(ay) 表示元素绕Y轴旋转一定的角度 ay 表示度数,可以为正,也可以为负
rotateZ(az) 表示元素绕Z轴旋转一定的角度 ax 表示度数,可以为正,也可以为负

rotateX、rotateY、rotateZ:

  .item1 {
    transform: rotateX(40deg);
  }
  .item2 {
    transform: rotateX(-40deg);
  }
  .item3 {
    transform: rotateY(40deg);
  }
  .item4 {
    transform: rotateY(-40deg);
  }
  .item5 {
    transform: rotateZ(40deg);
  }
  .item6 {
    transform: rotateZ(-40deg);
  }

3.4、transform-style

transform-style 用于设置元素的子元素是位于 3D 空间中还是平面中,其值如下:

描述
flat 表示所有子元素在 2D 平面呈现。
preserve-3d 表示所有子元素在 3D 空间中呈现。

4、总结

4.1、变换函数

位移变换函数:translate(x,y)、 translateX(x) 、 translateY(y) 、 translateZ(y)

  • x,y 的值为单位长度,可以是 px、百分比
  • z 的值只能为 px 长度单位
  • translate(x) 同等于 translate(x,0)

 
缩放变换函数:scale(x,y) 、scaleX(x)、 scaleY()

  • x,y 的值为数字,分别表示宽度和长度的缩放比例
  • scale(x) 表示 y 的值和 x 一样大,实现等比缩放

 
斜切变换函数:skew(ax,ay)、 skewX(ax)、 skewY(ax)

  • ax、ay 分表示水平和垂直拉升,使元素与 x 轴和 y 轴发生的扭曲角度

 
旋转变换函数:rotate(ax) 、rotateX() 、 rotateY()、 rotateZ()

  • rotate 表示 2D 平面旋转,ax 表示旋转度数,为正,表示顺时针旋转,为负,表示逆时针旋转
  • rotateX( ax ) 、rotateY( ay )、rotateZ( az )表示 3D 旋转,旋转的方向,可以通过左手法则来记忆

4.2、重要属性

perspective 视距:

  • 用来模拟人站在离电脑屏幕多远的距离来看这个元素。
  • 假设 div 的 width:300px;height:300px;perspective:900px; 则表示人站在离屏幕 900px 的位置看现在的 div。看到 div 的大小就是我们设置的 width:300px;和 height:300px;的大小;
  • 当 div 的 translateZ=0 时,看到的元素大小就是 width:300px 和 height:300px ;
  • 当 div 的 0
  • 当 div 的 translateZ<0 时,看到的元素要比实际的小;
  • 当 div 的 translateZ>300px 时,则看不到元素,因为元素在我们的后面。

 
transform-style 子元素是否在 3D 空间下呈现:
 

描述
flat 表示所有子元素在 2D 平面呈现。
preserve-3d 表示所有子元素在 3D 空间中呈现。

transform-origin:x y z; 设置变换的原点:

  • 默认值为 transform-origin:50% 50% 0;
  • x y 的值可以是长度单位 px 和百分比% 或预设的关键字

4.3、注意事项

transform 后面多个变换函数,用空格隔开,多个变换函数顺序不一样,结果会不一样。比如:先旋转会改变坐标。



上一篇文章 下一篇文章
CSS之transition与animation(十四)

你可能感兴趣的:(css,web前端,css,3d,css3)