2.8 CSS3之2D 转换
转换(transform )是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换( transform )你可以简单理解为变形
2D转换：是改变标签在二维平面上的位置和形状
-
移动：translate
-
旋转：rotate
-
缩放：scale
2.8.1 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系 0原点 ×轴水平向右 -------------------------------------> | | | |y轴垂直向下
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
重点知识点
-
定义2D转换中的移动，沿着X和Y轴移动元素
-
translate最大的优点∶不会影响到其他元素的位置
-
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
-
对行内标签没有效果
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* 水平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
/* 水平移动 100px */
/* transform: translateX(100px); */
/* 垂直移动 100px */
transform: translateY(100px);
/*百分比用法*/
transform: translateY(100%);
}
让一个盒子水平垂直居中
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
/* 1. 我们tranlate里面的参数是可以用 % */
/* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
/* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
/* transform: translateX(50%); */
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/1.* margin-top: -100px;
margin-left: -100px; */
/2.* translate(-50%, -50%)
盒子往上走自己高度的一半 */
transform: translate(-50%, -50%);
}
span {
/* translate 对于行内元素是无效的 */
transform: translate(300px, 300px);
}
2.8.2 2D转换之旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
/* rotate(度数) 单位是：deg */
img:hover {
transform: rotate(360deg)
}
-
rotate语法
-
rotate里面跟度数，单位是deg -
角度为正时，顺时针，角度为负时，逆时针
-
默认旋转的中心点是元素的中心点
-
-
设置元素旋转的中心的(transform-origin)
transform-origin: x y;
-
注意-
后面的参数 x 和 y 用空格隔开
-
x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center
-
还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)
-
2.8.3 2D转换之缩放scale
-
scale的作用：用来控制元素的放大与缩小
transform: scale(x, y)
-
知识要点： -
-
注意，x与y之间用逗号进行分隔
-
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大 -
transform: scale(2, 2): 宽和高都放大了二倍 -
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致 -
transform:scale(0.5, 0.5): 缩小 -
scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
-
div:hover {
/* 注意，数字是倍数的含义，所以不需要加单位 */
/* transform: scale(2, 2) */
/* 实现等比缩放，同时修改宽与高 */
/* transform: scale(2) */
/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
2.8.4 2D 转换综合写法以及顺序问题
知识要点
-
同时使用多个转换，其格式为
transform: translate() rotate() scale() -
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
-
当我们同时有位置或者其他属性的时候，要将位移放到最前面
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
2.8.5 2D转换总结
-
转换transform我们简单理解就是变形有2D和3D之分
-
我们暂且学了三个分别是位移旋转和缩放
-
2D移动translate(x, y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
-
可以分开写比如translateX(x)和translateY(y)
-
2D 旋转rotate(度数)可以实现旋转元素度数的单位是deg
-
2D缩放sacle(xy)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子
-
设置转换中心点transform-origin : x y;参数可以百分比、像素或者是方位名词
-
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
