调整CSS类型的顺序改变链接翻滚效果

要调整CSS类型的顺序以改变链接翻转效果，需要先理解翻转效果是如何实现的。一般情况下，可以使用CSS3的transform属性实现翻转，具体实现方法如下：

1.将需要翻转的元素设置为position:relative

2.设置翻转元素的transform-origin属性，表示翻转的中心点，一般默认为中心点。

3.使用CSS3的transform属性，配合translate3d，rotateX等属性实现翻转效果。

针对翻转链接，可以通过设置CSS的伪元素:before和:after实现翻转效果的前后部分。

示例1：水平翻转链接

首先，需要定义两个link类，.link-before和.link-after

.link-before {
position: relative;
display: inline-block;
padding: 20px;
}

.link-after {
position: relative;
display: inline-block;
padding: 20px;
transform: rotateY(180deg);
}

其中，.link-before表示链接前半部分，.link-after表示链接后半部分，通过transform: rotateY(180deg)实现水平翻转。

接下来，在HTML的a标签中添加伪元素:before和:after：

This is the text before the flip

.link-before:before和.link-after:after分别表示通过CSS伪元素定义的前后方块，在链接翻转时实现流畅的过渡效果。

最后，通过CSS应用样式来实现链接翻转

.link-after:before{
content: '';
background-color: #5ae;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: perspective(1000px) rotateY(-180deg);
transform-origin: right;
transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

.link-before:after{
content: '';
background-color: #5ae;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: perspective(1000px) rotateY(0);
transform-origin: left;
transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

在CSS3中，transition属性可以实现过渡效果，如transform .7s cubic-bezier(.4, 0, .2, 1)，表示transform过渡时间为0.7秒，过渡效果为cubic-bezier(.4, 0, .2, 1)。

示例2：垂直翻转链接

通过类似的方式，也可以实现垂直翻转的链接效果。具体方法为：

定义link-vertical类

.link-vertical {
position: relative;
display: inline-block;
padding: 20px;
transform: perspective(1000px) rotateX(0deg);
}

其中，perspective(1000px)表示设置视角距离为1000像素，rotateX(0deg)表示初始状态为不翻转。

接下来，在HTML中添加伪元素：，分别用于翻转前后部分。

最后，在CSS中定义link-before:before和link-after:after伪元素样式：

.link-before:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #5ae;
transform-origin: bottom;
transform: perspective(1000px) rotateX(180deg);
transition: transform .5s cubic-bezier(.4,0,.2,1);
}

.link-after:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #5ae;
transform-origin: top;
transform: perspective(1000px) rotateX(0);
transition: transform .5s cubic-bezier(.4,0,.2,1);
}

其中，transform-origin设置翻转的中心点，cubic-bezier(.4,0,.2,1)表示过渡效果。最终实现垂直翻转链接的效果。