如何3D旋转'a'标签？

Question

如何使用css 3D旋转来旋转<a>？我已尝试过这个。

transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform:perspective(300px) rotateY(360deg);
-webkit-transform:perspective(300px) rotateY(360deg); 
-moz-transform:perspective(300px) rotateY(360deg);
-ms-transform:perspective(300px) rotateY(360deg);
-o-transform:perspective(300px) rotateY(360deg);

Answer 1

您需要提供元素显示block或inline-block才能进行转换。

.rotate {
    display: inline-block;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform:perspective(300px) rotateY(180deg);
    -webkit-transform:perspective(300px) rotateY(180deg); 
    -moz-transform:perspective(300px) rotateY(180deg);
    -ms-transform:perspective(300px) rotateY(180deg);
    -o-transform:perspective(300px) rotateY(180deg);
}

jsfiddle