2020-3-1 前端達人
html5+css3實現(xiàn)2D-3D動畫效果實例
主要實現(xiàn)的功能就是一些2D、3D的動畫效果，如平移、縮放、旋轉等等。
文章目錄
html5+css3實現(xiàn)2D-3D動畫效果實例
2D變換
3D變換
2D中應用實現(xiàn)案例
3D中應用實現(xiàn)案例
css3動畫
2D變換
是在一個平面對元素進行的操作。
可以對元素進行水平或者垂直位移、旋轉或者拉伸.
1
2
*2d對下面面坐標系簡單分析如下：
（1）.默認狀態(tài)下，x軸是水平的，向右為正。
（2）.默認狀態(tài)下，y軸是垂直的，向下為正，這與傳統(tǒng)的數(shù)學坐標系不同。
下面首先需要了解2D、3D中的功能函數(shù)：
位移 translate()
translateX() 方法，元素在其 X 軸以給定的數(shù)值進行位置移動
translateY() 方法，元素在其 Y 軸以給定的數(shù)值進行位置移動
縮放scale()
scaleX()：相當于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認值是1。
scaleY()：相當于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認值是１。
旋轉rotate()
rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進行旋轉
rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進行旋轉
正數(shù)”是順時針，“負數(shù)”是逆時針，單位為“deg”。
傾斜skew()
一個參數(shù)時：表示水平方向的傾斜角度；
兩個參數(shù)時：第一個參數(shù)表示水平方向的傾斜角度，
第二個參數(shù)表示垂直方向的傾斜角度
3D中多了Z軸，其他屬性值不變
2D中應用實現(xiàn)案例
位移 translate()
效果圖：
position: absolute;
left: 20px; top: 40px;
transition: 2s;/*過渡時間*/
transform: translateY(-320px);
.box3:hover .box3_h2{
transform: translateY(0px);
}
<!-- 盒子3：實現(xiàn)位移 -->
<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; }