CSS3 2D 3D

2D 转换 transform

可简单理解为变形

1. 移动 translate

可以改变元素在页面中的位置，类似定位

transform: translate(50px,100px);

transform: translateX();

transform: translateY();

重点

• 定义2D转换中的移动，沿X、Y轴移动元素
• 优点：不会影响其他元素位置
• 百分比单位是相对于自身元素的 translate(50%，50%);
• 对行内标签没有效果

2. 旋转 rotate

让元素在二维平面内顺时针或者逆时针旋转

transform: rotate(50deg);

重点

• rotate的单位是度数deg
• 顺时针：角度为正，逆时针：角度为负
• 默认旋转的中心点是元素的中心点

设置转换中心点：

transform-origin:x y;

可以给x y设置像素或者方位名词（top bottom left right center）

3. 缩放scale

transform:scale(x,y);

重点

transform:scale(2,2); 宽和高都放大2倍，等价于transform:scale(2);

优点：可以设置中心点缩放，默认以中心点缩放，不影响其他盒子

2D 转换 综合写法

格式：transform:translate() rotate() scale();

顺序会影响转换的效果（如，先旋转会改变坐标轴方向）

当同时有位移和其他属性时，最好将位移放在最前面

动画

先定义动画 再调用动画

1. 用keyframes定义动画

@keyframes move {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }

@keyframes move {
           from {
                transform: rotateY(0);
            }
            to {
                transform: rotateY(360deg);
            }
        }

2. 元素使用动画

 div {
            animation-name: move;
			animation-duration：3s;
        }

动画常见属性

 

animation-timing-function: ease; 默认是ease （以低速开始，然后加快，在结束前变慢）

linear匀速

steps()指定了时间函数中的间隔数量（步长）

动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；

3D 转换 transform

三维坐标系

 

1. 移动 translate3d

3D移动在2D的基础上多了一个可移动方向，z轴

transform: translateX(); x轴上

transform: translateY(); y轴上

transform: translateZ(); z轴上

transform: translate3d(x,y,z);

2. 透视 perspective

透视也称视距：人眼到屏幕的距离

距离视觉点越近的在电脑平面成像越大，越远成像越小

透视的单位是像素px

重点：透视写在被观察元素的父盒子上

3. 旋转 rotate3d

transform: rotateX(45deg); 沿X轴正方向旋转45度

transform: rotateY(45deg);沿Y轴正方向旋转45度

transform: rotateY(45deg);沿Z轴正方向旋转45度

transform: rotate3d(x,y,z,deg);沿自定义的轴正方向旋转

4. 3D呈现 transform-style

控制子元素是否开启三维立体环境

transform-style:flat; 子元素不开启3d立体空间，默认

transform-style:preserve-3d; 子元素开启3d立体空间

代码添加在父元素上，但影响子元素