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