css过度效果 从无到有,求教，对于CSS3 transition和transform实现的一个特效原理不是太明白？...

已解决并实现

我这把这个效果的模版套了下来，如有需要可以私聊我，我发给你看，样式都写在html中的，主要的核心在于以下的CSS样式，这些样式你可能在用调试工具的时候没有发现(伪类)。

.cell .buttons-wrapper .button span {

display: block;

position: absolute;

left: 50%;

top: 50%;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

.cell .buttons-wrapper .button span.rotated {

-webkit-transform: rotateX(60deg) translate3d(-50%, -50%, 1rem);

transform: rotateX(60deg) translate3d(-50%, -50%, 1rem);

opacity: 0;

}

.cell .buttons-wrapper .button span.toRotate {

-webkit-transform: rotateX(0deg) translate3d(-50%, -50%, 1rem);

transform: rotateX(0deg) translate3d(-50%, -50%, 1rem);

opacity: 1;

}

.cell .buttons-wrapper .button:hover {

opacity: 1;

}

.cell .buttons-wrapper .button:hover span.rotated {

-webkit-transform: rotateX(0deg) translate3d(-50%, -50%, 1rem);

transform: rotateX(0deg) translate3d(-50%, -50%, 1rem);

opacity: 1;

}

.cell .buttons-wrapper .button:hover span.toRotate {

-webkit-transform: rotateX(-60deg) translate3d(-50%, -50%, 1rem);

transform: rotateX(-60deg) translate3d(-50%, -50%, 1rem);

opacity: 0;

}

.cell .buttons-wrapper .button:last-of-type {

margin-right: 0;

}