移动web

平面转换transform(2D转换)

作用： 为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换-平移

属性： transform:translate(x轴移动距离，y轴移动距离)；

取值：

• 像素单位数值
• 百分比（参照盒子自身尺寸计算结果）
• 正负均可

技巧：

• translate()可以只写一个值，表示沿着x轴移动
• 单独设置x或y轴移动距离 ：translateX()或translateY()

平移实现居中效果

方法一：

方法二： 百分比参照盒子 自身尺寸计算结果

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 50px;
border: 1px solid black;

双开门效果

平面转换-旋转

属性：transform: rotate(旋转角度)；

角度单位是 deg

技巧：

• 取值正负均可
• 取值为正，顺时针旋转
• 取值为负，逆时针旋转

平面转换-改变转换原点

默认情况下，转换原点是盒子中心点

属性：(加在元素本身)

transform-origin: 水平原点位置 垂直原点位置；

平面转换-多重转换

• 先平移再旋转

transform：translate() rotate();

/* 鼠标经过大盒子，图片平移加旋转 */
        .box:hover img {
            /* 先平移后旋转 */
            transform: translate(600px) rotate(360deg);
            /* 先旋转后平移不行，旋转会改变坐标轴向 */
            /* 多重转换，以第一种转换的坐标轴为准 */
            transform: rotate(360deg) translate(600px);
        }

平面转换-缩放

属性：

transform：scale(缩放倍数)；

transform: scale(x轴缩放倍速和，y轴缩放倍数)；

技巧：

• 通常，只为scale设置一个值，表示x轴和y轴等比例缩放、
• 取值大于1表示放大，小于1表示缩小

平面转换-倾斜

属性:

transform： skew();

取值：

角度度数deg

渐变

多个颜色逐渐变化的过程，一般用于设置盒子背景

分类：

• 线性渐变

• 属性：

background-images: linear-gradient(
渐变方向，
颜色1 终点位置，
颜色2 终点位置，
........
);

• 取值：

1. 渐变方向：可选

to 方位名词

角度度数

2.终点位置： 可选

百分比

• 径向渐变

• 属性：

background-images: radial-gradient(
半径 at 圆心位置，
颜色1 终点位置，
颜色2 终点位置，
........
);

• 取值：

1.半径可以是两条 ，则为椭圆

2. 圆心位置取值：像素单位数值/百分比/方位名词

ctrl+g输入目标行

bg: ......./20px 背景图片大小20px

空间转换（3D转换）

z轴与视线方向i相同

属性：transform

平移

属性：

取值：（正负均可）

• 像素单位数值
• 百分比（参考盒子自身尺寸计算结果）

视距perspective

作用：指定了观察者与z=0平面的距离，，为元素添加透视效果

透视效果：近小远大、近实远虚

属性：（添加给直接父级，取值范围800-1200）

perspective:视距；

旋转

左手法则-根据旋转方向确定取值正负

左手握住螺旋轴，拇指指向正值方向，，其他四个手指弯曲方向为 旋转正值方向

立体呈现-transform-style

作用：设置元素的子元素是位于3D空间中还是平面中

属性名：transform-style（加给父级）

属性值：

• flat:子级处于平面中（默认值 ）
• preserve-3d: 子级处于3D空间

缩放

属性：

动画-animation

实现步骤

1.定义动画

2.使用动画

animation: 动画名称 动画时长；

提示：

• 动画名称和动画时长必须赋值
• 取值不分先后顺序
• 如果有俩个时间值，第一个表示动画时长，第二个表示延迟时间

走马灯效果

复制之后无限循环

逐帧动画

多组动画