社交图标悬停效果较小

Question

我发现这个css3非常整洁。 http://dabblet.com/gist/8255020

我用代码试验了一些。但不知何故，我无法理解它。有人可以给我一些关于它是如何工作的更多信息吗？我真的希望这个使用.social，宽度和高度最大为50px而不是100px（这在网站上很重要。）

Answer 1

演示：50px Fiddle

更改：Diff of the two CSSes

• 每个社交图标由两个div组成。
  • .back面向观众，即。没有轮换 - transform:rotateY(0deg);
  • .front在3d空间中绕y（垂直轴）旋转100度因此成为立方体的左侧 - transform:rotateY(10deg);
  • 两个div都已应用translateZ(21px)，因此在3D空间中，他们会进一步远离＆＃34;观看者＆＃34;因此看起来更小，并隐藏在正面背后。
• 在:hover
  • 整个.social元素围绕Y旋转（在3D空间中），因此.front将可见（直到现在为多维数据集的左侧）并且.back变为隐藏（立方体的右侧）

注意：.social也有transform-style: preserve-3d，否则内部元素会失去3D效果。