CSS3 转换

CSS3 转换

转换( transform )是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换( transform) 你可以简单理解为变形

• 移动：translate

• 旋转：rotate

• 缩放：scale

2D 转换

2D 移动

2D 移动是2D 转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法：

transform: translate(x,y);
/* 或者分开写 */
transform: translateX(n) ;
transform: translateY(n) ;

重点：

• 定义 2D 转换中的移动，沿着X和Y轴移动元素
• translate 最大的优点∶不会影响到其他元素的位置
• translate 中的百分比单位是相对于盒子自身的宽度和高度：translate:(50%,50%);
• 对行内标签没有效果

结合定位实现盒子居中：

father {
    position: relative;
	width: 600px;
    height: 600px;
    background-color: pink;
}
son {
    /* 子绝父相 */
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: purple;
    /* 实现盒子居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2D 旋转

2D 旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。

语法：

transform: rotate(度数);

重点：

• rotate里面跟度数，单位是deg，比如rotate(45deg)
• 角度为正时，顺时针旋转；角度为负时，逆时针旋转
• 默认旋转的中心点是元素的中心点

使用举例：下三角：

div {
	position: relative;
    width: 249px;
	height: 35px;
	border: 1px solid #0e0;
}
.I

div::after {
	content: "";
	position:absolute ;
	top: 8px;
	right: 15px;
	width: 10px;
	height: 10px;
	border-right: 1px solid #000;
    border- bottom: 1px solid #000;
	transform: rotate(45deg); I
    transition: all 0.2s;
}
/* 鼠标经过div里面的三角旋转 */
div:hover::after {
	transform: rotate(225deg);
}

设置转换的中心点

我们可以设置元素转换的中心点。

语法：

transform-origin: x y;

重点

• 注意后面的参数×和y用空格隔开
• 默认的中心点是元素的中心点(50% 50%) 或 (center center)
• 还可以给 x y 设置像素或者方位名词( top bottom left right center )

2D 缩放

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法：

transform: scale(x,y);

注意：

• 注意其中的x和y用逗号分隔
• transform: scale(1, 1);宽和高都放大一倍，相当于没有缩放
• transform: scale(2, 2); 宽和高都放大了2倍
• transform: scale(0.5, 0.5);宽和高都缩小为原来的一半
• 只写一个参数，则第二个参数和第一个参数一样，transform: scale(2);相当于transform: scale(2, 2);
• sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
• sacle缩放，盒子阴影也会跟着缩放

2D 转换综合写法

1. 同时使用多个转换，其格式为：transform: translate(50%,.50%) rotate(45deg) scale(2);等
2. 其顺序会影转换的效果。先旋转会改变坐标轴方向。
3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前。

2D 转换小结

• 转换transform我们简单理解就是变形，有2D和3D之分。
• 2D 移动translate(x, y)最大的优势是不影响其他盒子，里面参数可以是百分比、像素，百分比是相对于自身宽度和高度来计算的，可以分开写，比如translateX(x)和translateY(y)。
• 2D 旋转rotate(度数) 可以实现旋转元素，度数的单位是**deg**。
• 2D 缩放 sacle(x,y) 里面参数是数字，不跟单位，可以是小数，最大的优势不影响其他盒子。
• 设置转换中心点transform-origin: x y;参数可以是百分比、像素或者方位名词。
• 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前。

3D 转换

3D 特点：

• 近大远小。
• 物体后面遮挡不可见

三维坐标系：

• x轴：水平向右，右边是正值，左边是负值
• y轴：垂直向下，下面是正值，上面是负值
• z轴：垂直屏幕，往外面是正值，往里面是负值

透视

如果想要在网页产生 3D 效果，需要透视。

​ 透视也称为视距，就是人的眼睛到屏幕的距离。

​ 透视越小，在电脑平面成像越大，立体感更好；透视越大，在电脑平面成像越小。

/* 透视需要写在被观察元素的父盒子上面*/ 
/* 透视的单位是像素 */
perspective: 200px;

3D 移动

前提：透视，父盒子有了透视才能看到translateZ引起的变化。

z 轴的大小代表物体距离屏幕的距离。

透视不变时，z轴越大 (正值) 我们看到的物体就越大。

/* 仅仅是在x轴上移动 */
transform: translateX(100px);

/* 仅仅是在Y轴上移动 */
transform: translateY(100px);

/* 仅仅是在Z轴上移动 ) */
/* translateZ 一般用 px 单位 */
transform: translateZ(100px);

/* 用空格隔开 */
transform: translateX(100px) translateY(100px) translateZ(100px);

/* 简写，其中x、y、z分别指要移动的轴的方向的距离 x、y、z不能为空 可以为0 */
transform: translate3d(0, 20px, 100px);

3D 旋转

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。

/* 沿着x轴正方向旋转45度 */
transform: rotateX(45deg);

/* 沿着x轴正方向旋转45度 */
transform: rotateY(45deg);

/* 沿着x轴正方向旋转45度 */
transform: rotateZ(45deg);

/* 沿着自定义轴旋转，了解即可 */
/* x、y、z是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转 */
/* 最后一个标示旋转的角度 */
transform: rotate3d(x,y,z,deg);
/* 沿着x轴正方向旋转45度 */
transform: rotate3d(1, 0, 0, 45deg) 
/* 沿着对角线旋转45° */
transform: rotate3d(1, 1, 0, 45deg) 

旋转方向判断

对于元素旋转方向的判断可以使用左手准则，以沿着x轴正方向旋转为例：

1. 左手的拇指指向x轴 的正方向
2. 其余手指的弯曲方向就是该元素沿着 x 轴正方形旋转的方向

3D 呈现transform-style

• 控制子元素是否开启三维立体环境。
• transform-style: flat;子元素不开启3d立体空间，默认的
• transform-style: preserve- 3d;子元素开启立体空间
• 代码写给父级，但是影响的是子盒子
• 这个属性很重要,后面必用