CSS3 动画系列

前言 其实，不用 Threejs也可以实现全景图，本文将以一个小例子，简单讲解一下 css3d-engine 的基本使用 基础知识 三维场景(Stage)：我们放置的位置 平面(Plane): 构建平

实现效果 开发准备 设计图：球面投影 原理： 切图、拼成圆球 刚开始叠在一起，然后按角度旋转，接着沿着z轴向外推到相应的位置，就接近一个球形拉 本事例将设计图切成 20 份 方式一：自己实现 代码结构

基础知识 陀螺仪 陀螺仪又叫角速度传感器，是不同于加速度计（G-sensor）的，他的测量物理量是偏转、倾斜时的转动角速度 在手机上，仅用加速度计没办法测量或重构出完整的3D动作，测不到转动的动作的，

效果 坐标图 实现 设置3D容器，基本结构 将6个面放到相应的位置（注意 transform 组合变形，是从右到左，先后不同，结果不同） 动起来 去掉 透视

基础概念 坐标 旋转 x左边是负的，右边是正的 y 上面是负的， 下面是正的 z 里面是负的， 外面是正的 与2d相比，3D多了z轴，z方向就是对着自己的方向 旋转 x轴：冲着自己转，为负角度 y轴：

先看一个Demo 七夕言情动画 - code animation-timing-function 是控制状态变化的时间属性（作用于每两个关键帧之间，而不是整个动画） steps(n,[start/en

CSS3如何改变了我的职业轨迹 15年之前：Java开发工程师、项目经理 当时前后不分家，没怎么重视前端技术的发展，主要使用HTML、CSS、ajax，Form、Table基本就够了，后来做富客户端，