html5+css3實現(xiàn)2D-3D動畫效果實例

主要實現(xiàn)的功能就是一些2D、3D的動畫效果，如平移、縮放、旋轉(zhuǎn)等等。



文章目錄

html5+css3實現(xiàn)2D-3D動畫效果實例

2D變換

3D變換

2D中應(yīng)用實現(xiàn)案例

3D中應(yīng)用實現(xiàn)案例

css3動畫

2D變換

是在一個平面對元素進行的操作。

可以對元素進行水平或者垂直位移、旋轉(zhuǎn)或者拉伸.

1

2

*2d對下面面坐標(biāo)系簡單分析如下：

（1）.默認狀態(tài)下，x軸是水平的，向右為正。

（2）.默認狀態(tài)下，y軸是垂直的，向下為正，這與傳統(tǒng)的數(shù)學(xué)坐標(biāo)系不同。

3D變換

2d場景，在屏幕上水平和垂直的交叉線x軸和y軸
3d場景，在垂直于屏幕的方法，相對于2d多出個z軸

下面首先需要了解2D、3D中的功能函數(shù)：

位移 translate()
translateX() 方法，元素在其 X 軸以給定的數(shù)值進行位置移動
translateY() 方法，元素在其 Y 軸以給定的數(shù)值進行位置移動
縮放scale()
scaleX()：相當(dāng)于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認值是1。
scaleY()：相當(dāng)于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認值是１。
旋轉(zhuǎn)rotate()
rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進行旋轉(zhuǎn)
rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進行旋轉(zhuǎn)
正數(shù)”是順時針，“負數(shù)”是逆時針，單位為“deg”。
傾斜skew()
一個參數(shù)時：表示水平方向的傾斜角度；
兩個參數(shù)時：第一個參數(shù)表示水平方向的傾斜角度，
第二個參數(shù)表示垂直方向的傾斜角度
3D中多了Z軸，其他屬性值不變

2D中應(yīng)用實現(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;
}
/* 鼠標(biāo)滑過覆蓋上方的白色部分 */
.box_mm{
    width:350px;
    height: 300px;
    transform: 1s;
    background-color: #fff;
    position: absolute;/*設(shè)置定位，擋住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;
}

————————————————
版權(quán)聲明：本文為CSDN博主「weixin_43513126」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43513126/article/details/104570062