1、2d坐标轴
-
2d坐标轴(图示)
-
x轴:水平,向右为正,向左为负
-
y轴:垂直,向下为正,向上为负
2、2d位移
transform: translate()平移 - transform: translate(x,y) 沿着x轴和y轴移动 - transform: translateX(x) 沿着x轴移动 - transform: translateY(y) 沿着y轴移动 取值: - px - 百分比(强调相对于元素本身计算) - 水平,向右为正,向左为负 - 垂直,向下为正,向上为负 - x与y之间用逗号隔开 > 水平向右为正值,垂直方向向下正值 /* 沿着水平方向位移 */ 当为一个值的时候,只沿着水平方向位移 transform: translate(50px); 注意:元素位移之后,原来的位置还在
3、2d缩放
语法: transform: scale(x,y); x:宽度 y:高度 x,y之间以逗号隔开 1: 默认值 不放大也不缩小 0:缩小为0 ,没有了 0-1:缩小 >1 :放大 如果只写一个值,宽高都进行缩放 transform: scale(1.2); 元素缩放为0 后,原来的位置还在 当为负值的时候,先翻转(180deg),后缩放
4、2d旋转
* 语法 * transform:rotate(deg);沿着中心点旋转,默认值 * transform: rotateX(deg);沿着X轴旋转 * transform: rotateY(deg);沿着Y轴旋转 • 单位:deg • 当角度值为正数时,元素沿着顺时针方向旋转 • 当角度值为负数时,元素沿着逆时针方向旋转
5、创建网页3d效果
- perspective属性:景深(透视),属性值为透视点到元素的距离,近大远小;也可以让网页产生3D效果,单位像素 一般取值:800px-1000px perspective:800px 就是人离屏幕800px 的地方观看这个div元素。 当translateZ的大小临近与800px时图片离我们越来越近了 当它大于800px时,这个图片就消失了 反之当translateZ为负值时,我们可以看到图片变小了,也就是图片离人越来越远了。
6、设置元素的基点位置
* transform-origin: 水平方向 垂直方向; * 设置元素的基点位置,设置围绕哪个点进行变化 * 取值 px 关键字 水平:left center right 垂直:top center bottom - 说明: 两个空格隔开的值,分别表示x,y轴的原点 一个值时,另一个值默认center - 可为负数 > 必须与transform属性配合使用 > > 位移不能用
7、旋转,位移,缩放,的复合写法
复合写法 旋转位移缩放 空格隔开
.wrap:hover .box1 {
transform: rotate(135deg);
transform: translate(50px);
transform: scale(1.5);
transform: translate(100px) rotate(120deg) scale(1.5);
}