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

Question

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

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