2D:
1. x,y一起使用 语法: transform:translate(x,y);
/* transform: 变化变换 */
transform: translate(200px,100px) ;
2.x,y 单独使用
transform: translateX(200px);
transform: translatey(200px);
transition: all 1s; 变化时间
3.缩放
1.数值相同时 可以写一个值
2.小于1的时候为缩小
3.不会影响其他元素位置,默认为元素中心点缩放
scale 代表缩放得意思 代表缩放比例 里面数字不设置单位
transform: scale(x,y);
4.旋转
transform-origin: ;/*设置旋转中心点位置 默认值 50% 50% 0(left top )*/
rotate:旋转 角度单位 deg
transform: rotate(45deg);
3D:
<!-- 3D转换基于css完成3D设计 -->
<!-- 在css中3D其实就是2D的一种补充,在2D屏幕基础上,新增了z轴,形成了三维坐标系 -->
<!-- 三维坐标系概念:在x轴,y轴基础上新增z轴 -->
<!-- 3D特点:近大远小 -->
<!-- 平面 x轴 y轴 -->
三维坐标系: x轴:水平向右为正值 向左为负值
y轴:垂直向下为正值 向上为负值
z轴:垂直屏幕 以屏幕为分割,往外为正值 往里为负值
/* transform: translate3d(); */
/* transform: translateX(200px); */
/* transform: translateY(100px); */
/* 目前看不到translateZ的效果,需要借助透视来做 */
/* 正值代表向外移动 顺着眼睛的方向 越来越近 */
/* transform: translateZ(300px); */
transform: translate3d(0,200px,300px);
/* 三个值都不能省略,如果不移动就写0 */
<!-- 透视:视距,就是眼睛距离屏幕的距离,距离视觉点越近的在屏幕上成像越大,越远的成像越小 -->
<!-- 遵循近大远小 -->
<!-- 透视 perspective -->
<!-- 视距,就是眼睛距离屏幕的距离 成反比 -->
<!-- z,物体距离屏幕的距离,z的值越大物体越大,成正比 -->
<!-- 如何使用: -->
<!-- 给父元素添加一个固定的perspective,子元素添加transform: translateZ()才有3D效果,必须配合使用, -->
<!-- 虽然两个都可以让盒子大小改变,但需要配合使用,让盒子变大变小,一般不会改变透视(视距),而是调整translateZ -->
/* 有透视就有了立体感 透视就是观察距离 */
perspective: 400px;
/* transform: rotateX(360deg) rotateY(150deg) rotateZ(45deg); */
/* transform: translate3d(x,y,z,deg);沿着定义轴旋转 */
/* 沿x轴旋转 */
/* transform: rotate3d(1,0,0,45deg); */
/* 沿对角旋转 */
transform: rotate3d(1,1,0,180deg);
/* 写法:爷爷元素设置 perspective: 400px; */
/* 父元素设置 transform-style: preserve-3d; */
/* 子元素: 旋转 缩放 平移 倾斜等等 */
三维立体开启: /* 默认值不开启三维立体 */
/* transform-style:flat ; */
transform-style: preserve-3d;/*保持开启3d空间*/
/* 旋转中心点 */
/* transform-origin: ; */