分別實現圖片沿着XYZ軸旋轉的動畫

本文轉載自查看原文 2020-05-17 07:46 555 css/ 動畫/ html

<!doctype html>
<html charset="utf-8">
<head>
<link rel="dns-prefetch" href="http://i.tq121.com.cn">
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>實現3D旋轉</title>
<meta http-equiv="Content-Language" content="zh-cn">

<meta name="keywords" content="關鍵詞,關鍵詞,..." />
<meta name="description" content="關鍵詞,關鍵詞,..." />
<style type="text/css">

/* 實現3D旋轉，兼容性暫時不考慮 */
/* 實現捆綁 myrotateX*/
@keyframes myrotateX
{
 0% {
        /* 實現角度變化*/
        transform: rotateX(0deg);
    }

    12.5%{
       /* 實現角度變化*/
        transform: rotateX(45deg);
    }

    25%  {
       /* 實現角度變化*/
        transform: rotateX(90deg);
    }

    37.5%{
       /* 實現角度變化*/
        transform: rotateX(135deg);
    }

    50% {
       /* 實現角度變化*/
        transform: rotateX(180deg);
    }
    62.5% {
       /* 實現角度變化*/
        transform: rotateX(225deg);
    }
    75% {
       /* 實現角度變化*/
        transform: rotateX(270deg);
    }
    87.5% {
       /* 實現角度變化*/
        transform: rotateX(315deg);
    }
    100% {
       /* 實現角度變化*/
        transform: rotateX(360deg);
    }
}
#divX
{
animation: myrotateX 30s both infinite;
width:400px;
height:400px;
}

/* 實現捆綁 myrotateY*/
@keyframes myrotateY
{
 0% {
        /* 實現角度變化*/
        transform: rotateY(0deg);
    }

    25%  {
       /* 實現角度變化*/
        transform: rotateY(90deg);
    }
    50%{
       /* 實現角度變化*/
        transform: rotateY(180);
    }

    75% {
       /* 實現角度變化*/
        transform: rotateY(270deg);
    }
    100% {
       /* 實現角度變化*/
        transform: rotateY(360deg);
    }
}
#divY
{
animation: myrotateY 30s both infinite;
width:400px;
height:400px;
}

/* 實現捆綁 myrotateZ*/
@keyframes myrotateZ
{
 0% {
        /* 實現角度變化*/
        transform: rotateZ(0deg);
    }

    25%  {
       /* 實現角度變化*/
        transform: rotateZ(90deg);
    }
    50%{
       /* 實現角度變化*/
        transform: rotateZ(180);
    }

    75%,85% {
       /* 實現角度變化*/
        transform: rotateZ(270deg);
    }
    100% {
       /* 實現角度變化*/
        transform: rotateZ(360deg);
    }
}
#divZ
{
animation: myrotateZ 30s both infinite;
width:400px;
height:400px;
}


}
</style>
</head>
<body>
<div id="divX"><img width="400" height="300" src="C:\Users\macbook\Desktop\1.jpg"/>X</div>

<div id="divY"><img width="400" height="300" src="C:\Users\macbook\Desktop\1.jpg"/>Y</div>

<div id="divZ"><img width="400" height="300" src="C:\Users\macbook\Desktop\1.jpg"/>Z</div>

</body>
</html>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用shader，矩陣旋轉實現圖片的旋轉動畫 Android立體旋轉動畫實現與封裝（支持以X、Y、Z三個軸為軸心旋轉） CSS3 實現 y軸旋轉切換顯示正反面內容 - 【動畫效果】 VUE-CSS圖片旋轉-實現加載中動畫效果 QT圖片旋轉動畫 ios 圖片旋轉動畫 css3動畫之圖片旋轉 js實現圖片旋轉 iOS 特定圖片的button的旋轉動畫 Swift--圖片旋轉動畫