css3------Creative Link(2)

我们模仿的是这个3D按钮（链接）

这是这一块的结构

<section class="secondLink">
            <nav class="effect2">
                <a href="">
                    <span class="ratatouille">
                        ratatouille
                    </span>
                </a>
                <a href="">
                    <span class="lassitude">
                        lassitude
                    </span>
                </a>
                <a href="">
                    <span class="murmurous">
                        murmurous
                    </span>
                </a>
                <a href="">
                    <span class="palimpsest">
                        palimpsest
                    </span>
                </a>
                <a href="">
                    <span class="assemblage">
                        assemblage
                    </span>
                </a>
            </nav>
        </section>

一.使用伪元素before的原因

    这里我刚开始自己动手做的时候是想利用两块span，将它变成inline-block搭建一个仅展现两个面的长方体，但是这样的话我们考虑鼠标hover的时候就需要两个span都进行翻转了，会比较麻烦，所以我们利用伪元素（其实before和after都可以），因为伪元素相对与他的父级是固定的，意思就是当这个span翻转的时候，这个伪元素构造的这个长方形的另一个面就会跟着翻转。

所以下面是我们的span::before的样式：

.secondLink nav a span::before{
    width: 100%;
    height: 100%;
    content: attr(class);
    position: absolute;
    left: 0;
    top: 100%;
    -webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transition: backgroundcolor 0.3s;
	-moz-transition: backgroundcolor 0.3s;
    transition: backgroundcolor 0.3s;
    -webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    background: #0965a0;
}

这里有个transform-origin: 50% 0;  我们放到后面span的时候讲

这里的attr(class),表示获取这个元素的class属性值，因为这里的5个a标签都是一样的效果，所以这样效率会更高

二.transform-origin: 50% 0

这其实是一个比较简单的属性，一定是配合transform的，但是在这里我一开始没有明白他的作用，所以我自己探究了一会（可以参考资料）

我们知道，transform-origin后面可以跟三个值，分别代表x,y,z，默认是transform-origin：50% 50% 0，就是是默认以一个图形的

中心做旋转，如果没有加这个属性值的话：

其实它是以：

这条线为旋转线的，但是我们加了这个属性值以后，旋转线就变成了：

最上面的那条边，所以才会出现原来的效果

三.细节

.secondLink nav a:hover span{
    /* -webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px); */
    transform: rotateX(90deg) translateY(-22px);
}
.secondLink nav a:hover span::before{
    background: #28a2ee;
}

这是两个hover之后的样式，但是我们知道，span元素确实需要旋转90°，但是为什么还要translateY(-22px),沿着y轴移动22个像素呢，我们将旋转速度放慢了看：

发现其实旋转的时候刚开始最上面的那个面是会向上移动一点的，这样看起来的旋转效果更好，所以我们需要加上这个平移

所以其实小小的一个旋转按钮会有很多的知识点