分别实现图片沿着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:UsersmacbookDesktop1.jpg"/>X</div>

<div id="divY"><img width="400" height="300" src="C:UsersmacbookDesktop1.jpg"/>Y</div>

<div id="divZ"><img width="400" height="300" src="C:UsersmacbookDesktop1.jpg"/>Z</div>

</body>
</html>

View Code

相关阅读:
KVC笔记
 在iOS工程中引入C++静态库
 看了iOS 7和Xcode 5后的感想
 OpenGL学习第一天
 常用iOS游戏开发工具与SDK
分享一个技巧，利用批处理调用ruby脚本（可能你为路径苦恼）
ruby酷酷的方法——另一种next
ruby的字符串性能到底如何最佳
 ruby元编程之 method_missing 一个细节
 ruby的继承到底可以继承哪些东西
原文地址：https://www.cnblogs.com/ciscolee/p/12903674.html