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

主页面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

效果图:


简单图片3D变换动画的制作(使用transition、transform)_第1张图片



你可能感兴趣的:(简单图片3D变换动画的制作(使用transition、transform))