效果演示
http://demo.qpdiy.com/hxw/CSS3/rotate+light.html
物体旋转：
卡牌同一位置放2张图片，通过设置3D动画旋转实现
animation: cardfront 2s infinite;
-webkit-animation: cardfront 2s infinite;
@keyframes cardfront{
0%{transform: rotateY(0deg);}
50%{transform: rotateY(180deg);}
100%{transform: rotateY(0deg);}
}
@keyframes cardback{
0%{transform: rotateY(180deg);}
50%{transform: rotateY(0deg);}
100%{transform: rotateY(180deg);}
}
光的效果：
@-webkit-keyframes cardlight{
0%{box-shadow: 0 0 0px 0px yellow;}
100%{box-shadow: 0 0 60px 0px yellow;}
}
以下是完整代码
1 <style type="text/css"> 2 .wrap{ 3 width: 640px; 4 margin: 0 auto; 5 } 6 .cardbg{ 7 position: relative; 8 width: 157px; 9 height: 220px; 10 transform: rotate(30deg); 11 -webkit-transform: rotate(30deg); 12 } 13 .card-back,.card-front{ 14 position: absolute; 15 left: 0; 16 top: 0; 17 width: 157px; 18 height: 220px; 19 backface-visibility: hidden; 20 box-shadow: 2px 2px 20px rgba(0,0,0,.5); 21 } 22 .card-front{ 23 z-index: 2; 24 animation: cardfront 2s infinite; 25 -webkit-animation: cardfront 2s infinite; 26 } 27 .card-back{ 28 z-index: 1; 29 background:url(images/cardbg.jpg) no-repeat; 30 background-size: 100% 100%; 31 animation: cardback 2s infinite; 32 -webkit-animation: cardback 2s infinite; 33 } 34 @keyframes cardfront{ 35 0%{transform: rotateY(0deg);} 36 50%{transform: rotateY(180deg);} 37 100%{transform: rotateY(0deg);} 38 } 39 @-webkit-keyframes cardfront{ 40 0%{-webkit-transform: rotateY(0deg);} 41 50%{-webkit-transform: rotateY(180deg);} 42 100%{-webkit-transform: rotateY(0deg);} 43 } 44 @keyframes cardback{ 45 0%{transform: rotateY(180deg);} 46 50%{transform: rotateY(0deg);} 47 100%{transform: rotateY(180deg);} 48 } 49 @-webkit-keyframes cardback{ 50 0%{-webkit-transform: rotateY(180deg);} 51 50%{-webkit-transform: rotateY(0deg);} 52 100%{-webkit-transform: rotateY(180deg);} 53 } 54 .card-light{ 55 width: 50px; 56 margin: 50px; 57 box-shadow: 0 0 10px 3px yellow; 58 animation: cardlight 0.5s linear infinite; 59 -webkit-animation: cardlight 0.5s linear infinite; 60 } 61 @-webkit-keyframes cardlight{ 62 0%{box-shadow: 0 0 0px 0px yellow;} 63 100%{box-shadow: 0 0 60px 0px yellow;} 64 } 65 </style> 66 </head> 67 68 <body> 69 <div class="wrap"> 70 <div class="cardbg"> 71 <div class="card-back"></div> 72 <img src="images/card1.jpg" alt="卡牌" class="card-front"> 73 </div> 74 <img src="images/card1.jpg" alt="卡牌" class="card-light"> 75 </div> 76 </body>