Question

刚开始使用CSS3并有一个初学者问题（关于stackoverflow的第一个问题！）。当你将鼠标悬停在它们上面时，我创造了四个可以旋转并改变颜色的小形状。每个形状里面都有一个文本框，上面有一个短语，如＆＃34;关于＆＃34;或＆＃34;联系。＆＃34;如何制作它，以便在我悬停时，文本框不会旋转，但它周围的形状呢？我想我必须在形状旋转的同时反向旋转我的跨度，但我在这方面遇到了麻烦。我知道形状上的间距很有趣，但我只是将它设置为我自己的练习。一旦我发现旋转问题，我就会解决所有的化妆品问题。

GC.Collect()

这是我的jfiddle：https://jsfiddle.net/mthrasher33/bdh8sybj/

谢谢！

Answer 1

你是对的，你可以计算 - 旋转文字：

.x1:hover span{
    -webkit-transform: rotate(-300deg);
       -moz-transform: rotate(-300deg);
        -ms-transform: rotate(-300deg);
         -o-transform: rotate(-300deg);
}

这就是：https://jsfiddle.net/bdh8sybj/1/

如果你想让文字保持在同一个位置，你可以使用CSS3翻译：

.x1:hover span{
    -webkit-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
       -moz-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
        -ms-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
         -o-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
}

https://jsfiddle.net/bdh8sybj/2/

如何在CSS3中旋转形状但不旋转形状内的文本？

1 个答案: