目录
1. animation动画2. 3D转换2.1 介绍2.2 3D位移2.3 透视perspective2.4 3D旋转2.4.1 rotateX2.4.2 rotateY2.4.3 rotateZ2.4.4 rotate3d
2.5 3D呈现transfrom-style2.6 两面翻转的盒子案例2.7 swiper插件
3. 浏览器私有前缀
1. animation动画
定义：可以设置一个网页元素，在不同的时间出现在不同的位置，做出不同的动作，从而实现复杂的动画
动画的使用步骤：
先定义动画
0%: 表示开始状态。可以省略。等同于from其它百分比: 可以定义其它时间节点的运动状态，百分比需要是整数。如49%时运动到右上角100%: 表示结束状态。等同于to 再使用动画
必须指定animation-name和animation-duration属性
动画使用属性含义：
animation-name: 指定使用的动画名称animation-duration: 指定动画一个运动周期内，即从from到to需要的时间。单位可以是s或ms。默认是0animation-timing-function: 动画的速度曲线，默认是ease。常用的可选参数还有: linear、ease-in、ease-out、ease-in-outanimation-delay: 打开web页面，延迟多久才开始动画。单位可以是s或ms。默认是0animation-iteration-count: 动画循环的次数，默认是1。infinite表示无限循环animation-direction: 在第二次循环的时候，默认normal是回到起点开始第二次循环。使用alternate则从终点逆向运动到起点，第三次循环继续从起点开始循环animation-fill-mode: 动画结束时的状态。默认backwards是回到起点的状态。forwards则保持运动结束时的最终状态animation-play-state: 一般配合hover使用，当鼠标放到web元素上面时，就会paused暂停动画。默认是running保持运动
动画简写
格式: animation：动画名称 持续时间 运动曲线 何时开始 循环次数 是否逆向 动画结束时状态;注意: 不包含animation-play-state。其中动画名称和持续时间必填，其它可以省略使用多个动画，用逗号分隔例如: animation: move 3s ease 3s 3 alternate forwards;
示例：
运动轨迹如下：
刚开始盒子位于左上角等过了3秒之后，盒子开始运动到右上角。然后往右下角运动，鼠标放到盒子上面，运动暂停，鼠标离开盒子，盒子继续往右下角运动然后开始第二次循环，从右下角往回运动到右上角，再运动到左上角最后开始第三次循环，从左上角运动到右上角，再运动到右下角最后盒子停留在右下角
2. 3D转换
2.1 介绍
特点：
近大远小物体后面遮挡不可见
三维坐标系:
x轴：水平向右。注意： x右边是正值，左边是负值y轴：垂直向下。注意： y下面是正值，上面是负值z轴：垂直屏幕。注意： 往外面是正值，往里面是负值
2.2 3D位移
在2D移动的基础上多加了一个z轴移动的方向。因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动(需要使用透视)
单独移动z轴: translform:translateZ(100px)。注意：translateZ一般用px单位一起移动: transform:translate3d(x,y,z)或transform: translateX(100px) translateY(100px) translateZ(100px)。其中x、y、z分别指要移动的轴的方向的距离
示例：
效果如下：
2.3 透视perspective
作用: 在2D平面产生近大远小视觉效果，从而实现3D效果。但还是3D物体投影在2D平面上原理: 一、透视就是视距d，即眼睛离屏幕的距离，距离越小物体越大，距离越大物体越小；二、物体向屏幕偏移的距离就是z，z为正看到的物体越大，z为负看到的物体越小实现: 在被观察元素的父元素上，指定perspective: 100px;，单位是像素
示例：
效果如下。perspective的值越小，盒子越大；向z偏移的值越大，盒子越大
2.4 3D旋转
让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转
transform:rotateX(45deg)：沿着x轴正方向旋转45度transform:rotateY(45deg)：沿着y轴正方向旋转45degtransform:rotateZ(45deg)：沿着Z轴正方向旋转45degtransform:rotate3d(x,y,z,deg)：沿着自定义轴旋转，deg为角度
2.4.1 rotateX
使用左手准则判断旋转方向: 左手的大拇指指向x轴的正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的正方向
示例：
鼠标放到图片上，图片旋转45度的效果
2.4.2 rotateY
使用左手准则判断旋转方向: 左手的大拇指指向y轴的正方向，其余手指的弯曲方向就是该元素沿着y轴旋转的正方向
示例：
鼠标放到图片上，图片旋转45度的效果
2.4.3 rotateZ
使用左手准则判断旋转方向: 左手的大拇指指向z轴的正方向，其余手指的弯曲方向就是该元素沿着z轴旋转的正方向
示例：
鼠标放到图片上，图片旋转45度的效果
2.4.4 rotate3d
rotate3d(x,y,z,deg)：沿着自定义轴旋转，x、y、z的值可以为0或1或其它矢量值，表示沿着该轴旋转的量，deg为角度。例如：
transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45degtransform:rotate3d(1,1,0,45deg)就是沿着x和y轴的对角线旋转45deg
同样适用左手准则
示例:
鼠标放到图片上，图片旋转45度的效果
2.5 3D呈现transfrom-style
作用: 控制子元素是否开启三维立体环境默认: transform-style: flat，不开启。父元素有3D效果时，子元素只有2D的效果开启: 在父元素使用transform-style: preserve-3d;。给子元素开启立体空间
示例：
不使用transform-style: preserve-3d;。鼠标放到图片上，图片旋转45度的效果
使用transform-style: preserve-3d;。鼠标放到图片上，图片旋转45度的效果
2.6 两面翻转的盒子案例
打开页面，显示的是我是男生，如下所示：
鼠标放到盒子上，显示的是我是女生，如下所示：
2.7 swiper插件
官网地址
使用方式一：
从官网的【获取Swiper-下载Swiper】下载swiper-11.0.3.zip，然后查看demo文件夹下的html文件示例自己的html中拷贝html文件示例的html结构、css样式(.swiper开头的)、js语法，然后引用和html文件示例一样的CSS文件(放在引用自己的CSS文件前面)和JS文件查看官网的【API文档】，根据自己的需求进行改造(可以参考多个html文件示例)。其中swiper-button-prev左箭头和swiper-button-next右箭头的div可以放到swiper-container的div外边 使用方式二：
在官网的【在线演示-Swiper基础演示】找到类似案例，然后在新窗口打开，右键查看网页源代码自己的html中拷贝网页源代码的html结构、css样式(.swiper开头的)、js语法，然后引用和网页源代码一样的CSS文件(放在引用自己的CSS文件前面)和JS文件查看官网的【API文档】，根据自己的需求进行改造(可以参考多个html文件示例)。其中swiper-button-prev左箭头和swiper-button-next右箭头的div可以放到swiper-container的div外边
3. 浏览器私有前缀
是为了兼容老版本浏览器的写法，比较新版本的浏览器无须添加。私有前缀如下：
-moz-：代表firefox浏览器私有属性-ms-：代表ie浏览器私有属性-webkit-：代表safari、chrome私有属性-o-：代表Opera私有属性
提倡的写法如下。一个属性如果存在兼容性问题，则书写多个浏览器的私有前缀属性。如在谷歌浏览器，-webkit-border-radius和border-radius都有效
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
推荐阅读
您阅读本篇文章共花了：
发表评论