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

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

文章目录

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

2D变换

3D变换

案例实现相关知识点

透明属性

过渡属性

定位属性

2D中应用实现案例

3D中应用实现案例

css3动画

效果显示：

2D变换

是在一个平面对元素进行的操作。

可以对元素进行水平或者垂直位移、旋转或者拉伸.

*2d对下面面坐标系简单分析如下：

(1).默认状态下，x轴是水平的，向右为正。

(2).默认状态下，y轴是垂直的，**向下为正，**这与传统的数学坐标系不同。

3D变换

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴

3d场景，在垂直于屏幕的方法，相对于2d多出个z轴

Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

下面首先需要了解2D、3D中的功能函数：

位移 translate()

translateX() 方法，元素在其 X 轴以给定的数值进行位置移动

translateY() 方法，元素在其 Y 轴以给定的数值进行位置移动

缩放scale()

scaleX()：相当于scale(sx,1)。表示元素只在X轴(水平方向)缩放元素，其默认值是1。

scaleY()：相当于scale(1,sy)。表示元素只在Y轴(纵横方向)缩放元素，其默认值是１。

旋转rotate()

rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

正数”是顺时针，“负数”是逆时针，单位为“deg”。

倾斜skew()

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，

第二个参数表示垂直方向的倾斜角度

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

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

案例实现相关知识点

透明属性

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

过渡属性

：transition；

简写：

transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型

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

定位属性

：position；

属性值

static 静态定位：position的默认值，默认文本状态，不识别left、right、top、bottom指定的坐标。

absolute 绝对定位：它的参照物物是已有定位的父元素进行位置的变化，假如当前没有父元素或者父元素没有定位的情况下，以整个文档为参照物，绝对定位，脱离文档流，不占据空间。

relative 相对定位：参照物自身默认的位置，始终占据空间，不会破坏文档流。

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文件

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文件：即立方体的每个面

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);}

}