html5+css3实现2D-3D动画效果实例 - 蓝蓝设计_UI设计公司

帝皇彩票官网

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

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轴是垂直的,**向下为正,**这与传统的数学坐标系不同。


20200229102614292.png



3D变换

2d场景,在屏幕上水平和垂直的交叉线x轴和y轴
3d场景,在垂直于屏幕的方法,相对于2d多出个z轴



20200229102729418.png

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

位移 translate()
translateX() 方法,元素在其 X 轴以给定的数值进行位置移动
translateY() 方法,元素在其 Y 轴以给定的数值进行位置移动
缩放scale()
scaleX():相当于scale(sx,1)。表示元素只在X轴(水平方向)缩放元素,其默认值是1。
scaleY():相当于scale(1,sy)。表示元素只在Y轴(纵横方向)缩放元素,其默认值是1。
旋转rotate()
rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转
正数”是顺时针,“负数”是逆时针,单位为“deg”。
倾斜skew()
一个参数时:表示水平方向的倾斜角度;
两个参数时:第一个参数表示水平方向的倾斜角度,
第二个参数表示垂直方向的倾斜角度
3D中多了Z轴,其他属性值不变

2D中应用实现案例
位移 translate()
效果图:

2020022912243794.gif


 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

标签: css3

Powered by sitemap
乐彩网 迪士尼彩乐园 迪士尼彩乐园 吉利彩票导航 吉利彩票计划 状元彩票官网 大象彩票APP 赖子棋牌 桔子彩票开奖 状元彩票官网