html5+css3實現2D-3D動畫效果實例
主要實現的功能就是一些2D、3D的動畫效果，如平移、縮放、旋轉等等。
文章目錄
html5+css3實現2D-3D動畫效果實例
2D變換
3D變換
2D中應用實現案例
3D中應用實現案例
css3動畫
2D變換
是在一個平面對元素進行的操作。
可以對元素進行水平或者垂直位移、旋轉或者拉伸.
1
2
*2d對下面面坐標系簡單分析如下：
（1）.默認狀態下，x軸是水平的，向右為正。
（2）.默認狀態下，y軸是垂直的，向下為正，這與傳統的數學坐標系不同。
3D變換
2d場景，在屏幕上水平和垂直的交叉線x軸和y軸
3d場景，在垂直于屏幕的方法，相對于2d多出個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軸，其他屬性值不變
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;
}
————————————————
版權聲明：本文為CSDN博主「weixin_43513126」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43513126/article/details/104570062
