html5+css3实现2D-3D动画效果实例

html5+css3实现2D-3D动画效果实例

主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。

效果显示：

2D变换

是在一个平面对元素进行的操作。
可以对元素进行水平或者垂直位移、旋转或者拉伸.

*2d对下面面坐标系简单分析如下：
（1）.默认状态下，x轴是水平的，向右为正。
（2）.默认状态下，y轴是垂直的，**向下为正，**这与传统的数学坐标系不同。

3D变换

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于2d多出个z轴

Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向
下面首先需要了解2D、3D中的功能函数：

1. 位移 translate()
   translateX() 方法，元素在其 X 轴以给定的数值进行位置移动
   translateY() 方法，元素在其 Y 轴以给定的数值进行位置移动
2. 缩放scale()
   scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
   scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
3. 旋转rotate()
   rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
   rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
   正数”是顺时针，“负数”是逆时针，单位为“deg”。
4. 倾斜skew()
   一个参数时：表示水平方向的倾斜角度；
   两个参数时：第一个参数表示水平方向的倾斜角度，
   第二个参数表示垂直方向的倾斜角度

3D中多了Z轴，其他属性值不变

这里先介绍一下（案例中所用到的其他知识点）

案例实现相关知识点

透明属性

：opacity；属性值0-1，0为全透明。

过渡属性

：transition；
简写：

transition:具体属性值 运动时间s/ms 动画类型(过渡速度) 延迟时间s/ms

• all（默认值）\ none没有属性获得过渡效果 \ property : 定义应用过渡效果的 CSS 属性名称列表，列表多个可以以逗号分隔。
• 运动时间s/ms
• 动画类型(过渡的速度 ease由快致到慢、linear恒速、ease-in越来越快、ease-out越来越慢、ease-in-out先加速后减速)
• 延迟时间s/m

transition 允许 css 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

定位属性

：position；
属性值

1. static 静态定位：position的默认值，默认文本状态，不识别left、right、top、bottom指定的坐标。
2. absolute 绝对定位：它的参照物物是已有定位的父元素进行位置的变化，假如当前没有父元素或者父元素没有定位的情况下，以整个文档为参照物，绝对定位，脱离文档流，不占据空间。
3. relative 相对定位：参照物自身默认的位置，始终占据空间，不会破坏文档流。
4. fixed 绝对定位：参照物为整个浏览器窗口，

包含块的设置： 如果父元素为参照物，添加：position:relative
如果给做定位的子元素添加定位，添加：position:absolute

定位元素：后定位的元素会把前面定位覆盖住，
z-index：控制定位元素的层次关系，属性值为一个数字（可以为负数）数字越大，层次关系越高，默认为auto，即两个定位在同一个位置，某个定位需要显示在其上方，层次设置高值。

2D中应用实现案例

位移 translate()
效果图：

因为这个效果，主要是垂直方向上的运用，2d中的位移就能实现，
主要思路：html中的布局，再确定文字位移的方向，而效果图中标题部分，是从上方渐下显示，这里就需要想到位移和过渡，并且垂直方向、上而下，y轴是垂直的，向下为正， y-到y+的值，

首先css样式中确定标题在盒子外的位置，和过渡时间。

    position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*过渡时间*/
    transform: translateY(-320px);

鼠标滑过标题位移

.box3:hover .box3_h2{
   
    transform: translateY(0px);
}

然后效果就出来了，但你会发现，标题在盒子外，鼠标滑过再到盒子里面，这里在盒子中加入overflow: hidden;隐藏盒子外的内容即可。

html文件

<!-- 盒子3：实现位移 -->
        <div class="box3 box">
            <img class="img_3" src="../16/images/3.png" alt="">
            <div class=