2d坐标轴
-
x轴:水平,向右为正,向左为负
-
y轴:垂直,向下为正,向上为负
2d位移
transform: translate()平移 - transform: translate(x,y) 沿着x轴和y轴移动 - transform: translateX(x) 沿着x轴移动 - transform: translateY(y) 沿着y轴移动 取值: - px - 百分比(强调相对于元素本身计算) - 水平,向右为正,向左为负 - 垂直,向下为正,向上为负 - x与y之间用逗号隔开 > 水平向右为正值,垂直方向向下正值 /* 沿着水平方向位移 */ 当为一个值的时候,只沿着水平方向位移 transform: translate(50px); 注意:元素位移之后,原来的位置还在
2d缩放
语法: transform: scale(x,y); x:宽度 y:高度 x,y之间以逗号隔开 1: 默认值 不放大也不缩小 0:缩小为0 ,没有了 0-1:缩小 >1 :放大 如果只写一个值,宽高都进行缩放 transform: scale(1.2); 元素缩放为0 后,原来的位置还在 当为负值的时候,先翻转(180deg),后缩放
2d旋转
* 语法 * transform:rotate(deg);沿着中心点旋转,默认值 * transform: rotateX(deg);沿着X轴旋转 * transform: rotateY(deg);沿着Y轴旋转 • 单位:deg • 当角度值为正数时,元素沿着顺时针方向旋转 • 当角度值为负数时,元素沿着逆时针方向旋转
创建网页3d效果
- perspective属性:景深(透视),属性值为透视点到元素的距离,近大远小;也可以让网页产生3D效果,单位像素 一般取值:800px-1000px perspective:800px 就是人离屏幕800px 的地方观看这个div元素。 近大远小 一般设置给父元素或者body
设置元素的基点位置
* 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); }