前端小白刚学的3d位移旋转与动画渲染(大牛勿进)

最新推荐文章于 2024-08-21 22:51:08 发布

YJ_YJ_YJ_

最新推荐文章于 2024-08-21 22:51:08 发布

阅读量588

点赞数 3

文章标签： 3d 动画 css3 前端

本文链接：https://blog.csdn.net/YJ_YJ_YJ_/article/details/127180997

版权

本文介绍了前端开发中的CSS3 3D位移和旋转，包括translate3d()函数用于实现3D平移，以及rotateX(), rotateY(), rotateZ()用于3D旋转。在进行Z轴位移和旋转时，需要设置父元素的perspective属性或开启3D模式。同时，文章还讲解了如何创建3D旋转动画，并提供了轮播图动画的实现步骤。" 47973145,1314825,Apple Watch UI设计指南,"['UI设计', 'Apple Watch开发', 'WatchKit', '用户交互', '界面导航']

摘要由CSDN通过智能技术生成

3d位移分为x轴,y轴,z轴三个方向位移如下:

transform:translateX() transform:translateY() transform:translateZ()

综合写法: transform:translate3d(x,y,z)

特别注意:如果是z轴位移需要给父元素添加透视属性(perspective)取值范围一般在800px-1200px之间或者给父元素转换为3d模式(transform-style: preserve-3d;)

位移速度过快可以给需要的元素添加过渡,设置过渡时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* 透视:近大远小,近实远虚,如果你想看到z轴,需要父级添加透视 */
            /* 透视的取值为800-1200 */
            /* 透视:调整眼睛到屏幕的距离,值越大距离越远,盒子看起来越小,反之越大 */
            perspective: 800px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 200px auto;
            transition: all 2s;
            
        }
        .box:hover{
            /* 面对你自己的方向  z轴  默认在平面无法看到z轴的变化,正值面对自己,负值面对自己的反方向 */
           
           /* 综合写法  :tranlate3d(x,y,z) */
            transform: translate3d(-400px,500px,-500px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3d旋转分为x轴,y轴,z轴三个方位旋转