求教，对于CSS3 transition和transform实现的一个特效原理不是太明白？

Question

下午在看友商的官网，看见官网页面一个CSS3特效，看了很久也没想明白它的实现原理，希望各位能帮我参考下是如实现这个效果的.
大概的实现效果就是

点击上面“无房卡开门”，“酒店智能取电”这些个按钮时，能起到类似翻转的效果，F12看了下它的代码,
html代码如下：

    <span class="rotated">无房卡开门</span>
    <span class="toRotate">无房卡开门</span>

CSS代码中用到了CSS3新特性transition(过渡)和transform中的3D转换转换,用两个相同的span来实现类似翻转的效果，但是对实现原理实在想不明白，希望各位能帮忙解答下.

假如我的描述真的太冗余，描述不清，可以在https://www.yeeuu.com/project...上具体看下按钮实现效果原理！

拜托各位了，谢谢！

Answer 1

给你提供思路
先去看rotated和toRatate的样式，然后对他们父元素force hover以后再去看这俩的样式，做个比较

//就是对这个a标签force hover
<a class="button" href="/project/groupHotel/noCard">
        <span class="rotated">无房卡开门</span>
        <span class="toRotate">无房卡开门</span>
</a>