03.2个a标签做90度旋转bug
定义了一个动画效果如下(sass代码)：
@keyframes official-featured_rotate {
10%,50%{ transform:rotateY(90deg); } 60%,100%{ transform:rotateY(0deg); }}&-rotate { position: absolute; width: rem(350/2); height: rem(160/2); transform-style:preserve-3d; transform:translate3d(0,0,0); &.ani_rotate { animation:official-featured_rotate 5s linear 0s infinite; animation-delay: 2s; } &__item { width: rem(350/2); height: rem(160/2); position: absolute; &:nth-child(1) { transform: translateZ(rem(350/4)); } &:nth-child(2) { transform: rotateY(90deg) translate3d(0,0,rem(350/4)); } }}
这里是2个a标签，做90度的旋转效果使得两个a可以循环切换展示。这里2个的基本样式是一致的，宽高也一样。但是在安卓下（ios正常）只有打开页面能看到的第一个a标签能正常跳转，能正常绑定事件。第二个a不能跳转，我就想那我通过点击事件来跳转可以不，结果绑定任何事件都不生效。
解决方法：
然后测试发现，在旋转过程中（只要未完全旋转90度）点击还是能一切正常的。于是把旋转角度改为了89.99度，一切正常。动画效果修改为：
@keyframes official-featured_rotate {
10%,50%{ transform:rotateY(-89.99deg); } 60%,100%{ transform:rotateY(0deg); } }
后来查找了一下stackoverflow(https://stackoverflow.com/questions/23548612/cant-click-on-buttons-after-css-transform)。里面也是说了这个解决方法。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
PS