关于rotate动画在ios设备无效的问题

最近在一个页面里做一个扑克牌的旋转效果，测试的时候发现，在chrome上和Android设备上旋转效果都是没问题的，但是在ios设备上就完全没效果，这可急坏了宝宝，网上各路大神给的解决方案都是加上-webkit-前缀就可以，但是我试了一下，还是没有效果，之后就开始一路寻找破解方案之路。
这是我开始的代码

.animation3d {    animation:rotate 0.2s infinite linear;}@keyframes rotate{    0%{        transform: rotate3d(0,1,0,0deg);    }    100%{        transform: rotate3d(0,1,0,360deg);    }}

后来加了前缀

.animation3d {    -webkit-animation:rotate 0.2s infinite linear;    animation:rotate 0.2s infinite linear;}@-webkit-keyframes rotate{    0%{        -webkit-transform: rotate3d(0,1,0,0deg);    }    100%{        -webkit-transform: rotate3d(0,1,0,360deg);    }}@keyframes rotate{    0%{        transform: rotate3d(0,1,0,0deg);    }    100%{        transform: rotate3d(0,1,0,360deg);    }}

可是加上了之后也无济于事…，在兽兽的帮助下，看了无数个帖子分享和属性说明之后，我对代码做了些微改动

.animation3d {    -webkit-animation:rotate 0.2s infinite linear;    animation:rotate 0.2s infinite linear;}@-webkit-keyframes rotate{    0%{        -webkit-transform: rotate3Y(0deg);    }    100%{        -webkit-transform: rotateY(360deg);    }}@keyframes rotate{    0%{        transform: rotateY(0deg);    }    100%{        transform: rotateY(360deg);    }}

你是想不到啊，它居然就动了！！真的动了！
rotate在Safari8.0以上应该是完全支持的，但是不知道为什么rotate3d怎么都不支持，还好rotateX 和rotateY还是支持的，所以解决了我的问题