2020-3-1 前端达人
html5+css3实现2D-3D动画效果实例
主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。
文章目录
html5+css3实现2D-3D动画效果实例
2D变换
3D变换
2D中应用实现案例
3D中应用实现案例
css3动画
2D变换
是在一个平面对元素进行的操作。
可以对元素进行水平或者垂直位移、旋转或者拉伸.
1
2
*2d对下面面坐标系简单分析如下：
（1）.默认状态下，x轴是水平的，向右为正。
（2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。
下面首先需要了解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轴，其他属性值不变
2D中应用实现案例
位移 translate()
效果图：
position: absolute;
left: 20px; top: 40px;
transition: 2s;/*过渡时间*/
transform: translateY(-320px);
.box3:hover .box3_h2{
transform: translateY(0px);
}
<!-- 盒子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>
————————————————/* 公共样式 */ .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; }