简单图片3D变换动画的制作（使用transition、transform）

最新推荐文章于 2020-08-05 03:45:59 发布

混沌极致

最新推荐文章于 2020-08-05 03:45:59 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5、CSS3

本文链接：https://blog.youkuaiyun.com/marujunyy/article/details/8466216

HTML5、CSS3 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何使用HTML5、CSS3D、JavaScript等技术实现动态图像的移动和旋转效果，包括引入jQuery库进行简化操作，并通过dh.js文件中的JavaScript代码控制图像的3D移动和旋转，实现流畅的视觉体验。同时，演示了如何通过main.css文件中的CSS样式提升图像的视觉吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主页面html代码：

<!DOCTYPE HTML >
<html>
<head>
    <meta charset="UTF-8">
    <link href="jquery/main.css" rel="stylesheet" type="text/css" />
    <title></title>
    <script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>//为了后面使用$引入
    <script type="text/javascript " src="jquery/dh.js">
    </script>
</head>
<body >
<div  id="3ddh" >
    <img src="1.jpg" alt="未加载！">
</div>
<div  id="3ddh2" >
    <img src="1.jpg" alt="未加载！" >
</div>
</body>
</html>

dh.js代码：//第二个图像通过在javascript中嵌入css控制移动

window.onload = jsc;
function jsc()
{
    $('#3ddh2').css
        (   {
                '-webkit-transform': 'translate(200px, 200px) rotateY(70deg)',//控制图片移动的位置和3D效果
                '-webkit-transition': 'all 2s ease0s'//控制图像移动的时间
            }

        );
    $('#3ddh').addClass("dh");
    for(var i=0;i<10;i++)
    {
        var b=2;
        b+=1;
    }
}

main.css代码：//第一个图像通过编写css然后在javascript中调用

.dh{
    -webkit-transform: translate(100px, 50px) rotateY(70deg) ;
    -webkit-transition-property:width height;
    -webkit-transition: all2s ease 0s;
}

//相关技术网站hands on 3D transitions html5 platform

效果图：