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:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型

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="box_mm"></div>
            <h2 class="box3_h2">Taylor Swift</h2>
            <p class="box3_p1">I'm so glad you made time to see me. How's life, 
                tell me how's your family? I haven't seen them in a while. 
                You've been good, busier then ever. 
                We small talk, work and the weather Your guard is up and I know why...</p>
        </div>

css公共样式

/* 公共样式 */
.box{
    width:350px;
    height: 300px;
    position: relative;
    transform: 1s;
    margin: 20px 20px;
    float: left;
}
img{
    display: block;
    width: 350px;
    height: 300px;
}
/* 鼠标滑过覆盖上方的白色部分 */
.box_mm{
    width:350px;
    height: 300px;
    transform: 1s;
    background-color: #fff;
    position: absolute;/*设置定位，挡住box，*/
    top: 0;
    opacity: 0;/*透明，0全透明*/
}
h2{
    font-size: 20px;
}

/* 盒子3 */
.box3{
    overflow: hidden;
}
.img_3{
    transition: 2s;
}
.box3_h2{
    color: #fff;
    position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*过渡时间*/
    transform: translateY(-320px);
}
.box3_p1{
    font-size: 14px;
    width: 320px;
    position: absolute;
    left: 20px; bottom: 80px;
    transition: 2s;
    opacity: 0;
}
/*交互样式*/
.box3:hover .img_3{
    transform: translateY(-10px);
}
.box3:hover .box3_h2{
    transform: translateY(0px);
}
.box3:hover .box3_p1{
    transform: translateY(-50px);
    opacity: 1;
}

2d中位移 translate() 、缩放scale() 、旋转rotate() 、倾斜skew()运用和上方差不多，这里就不一一重复详细介绍了，需要注意的是旋转，它的值为角度deg。

3D中应用实现案例

3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向
3d拥有更多的的立体感，

transform-style 属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。如果对一个元素设置了 transform-style 的值为 preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。

旋转即x或y轴的角度变化，这里不过多介绍，因为在上方的立方体中使用了动画，就稍微介绍一下动画，更多动画详情html5+css3实现动画、逐帧动画效果。

css3动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片。
首先定义关键帧

@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}

在需要动画的元素上调用关键帧

/* 调用动画 */
animation: conMove 8s linear infinite;
conMove：动画名称
8s：动画持续时间
linear：动画频率linear匀速
infinite：定义循环是无限循环

立方体实现思路：首先形成3D空间，利用 transform-origin 变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了 transform 属性的时候起作用；简单可理解为固定了某个点，固定某个点再让其相应的边进行旋转，而对应正中间的面配合Z轴位移向前并配合旋转，即可达到上方效果。

立方体实现代码：
html文件：即立方体的每个面

<div id="boxMax">
        <div class="con1 con">1</div>
        <div class="con2 con">2</div>
        <div class="con3 con">3</div>
        <div class="con4 con">4</div>
        <div class="con5 con">5</div>
        <div class="con6 con">6</div>
    </div>

css样式

@charset"utf-8";
#boxMax{
    width:300px;
    height:300px;
    margin: auto auto;
    position: fixed;
    left: 0;top: 0;
    bottom: 0; right: 0;
    transform-style: preserve-3d;
    transform: rotateX(20deg) rotateY(20deg);
    /* 调用动画 */
    animation: conMove 8s linear infinite;
}
.con{
    width: 100px;
    height: 100px;
    font-size: 40px;
    color: black;
    text-align: center;
    line-height: 100px;
    position: absolute;
    left:50px; top:50px;
    opacity: 0.8; 
}
/*每个面的颜色和确定变形原点*/
.con1{
    background-color: cornflowerblue;
   /*transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；简单可理解为固定了某个点*/
    transform-origin: right center;
    transform: rotateY(90deg);
}
.con2{
    background-color: darkcyan;
    transform-origin: left center;
    transform: rotateY(-90deg);
}
.con3{
    background-color: darkgoldenrod;
    transform-origin: top center;
    transform: rotateX(90deg);
}
.con4{
    background-color: darkmagenta;
    transform-origin: bottom center;
    transform: rotateX(-90deg);
}
.con5{
    background-color: greenyellow;
    transform-origin: center center;
    transform: translateZ(0px) rotateY(180deg);
}
.con6{
    background-color: darksalmon;
    transform-origin: center center;
    transform: translateZ(100px) rotateY(360deg);
}

@keyframes conMove{
    0%{transform:   rotateX(0)         rotateY(0); }
    25%{transform:  rotateX(180deg)    rotateY(180deg);}
    50%{transform:  rotateX(0)         rotateY(360deg);}
    75%{transform:  rotateX(-180deg)   rotateY(540deg);}
    100%{transform: rotateX(-360deg)   rotateY(720deg);}
}