分别实现图片沿着XYZ轴旋转的动画 

<!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

 

posted @ 2020-05-17 07:46  CiscoLee  阅读(685)  评论(0)    收藏  举报