创建逐步增强的3D CSS翻转

翻车是一件好事。他们让事情变得更加明显,他们是互动的,他们允许我们展示不同的东西,而不会放弃有价值的屏幕。我记得有一次我通过在菜单按钮上显示翻转效果来赢得我公司的音调。当然,那是1998年,现在我们对它们不那么兴奋了。

这是一个遗憾,因为我们现在在浏览器中有更多的东西可以玩。在这里,我们将看一下使用CSS,3D CSS转换,过渡和CSS动画来创建一些很棒的翻转样式,而不会告诉人们他们需要某些浏览器。相反,我们将回归所有支持CSS的浏览器的普通翻转。为简洁起见,我们在这里的代码示例中不会包含所有浏览器前缀,但它们位于您可以下载的最终产品中:

我们将在这里讨论的所有内容都放在一个样式表中,您可以将其添加到您的站点中GrolHub上提供3Drollovers.css。在那里你也可以看到它在行动。为获得最佳体验,请使用Firefox Aurora或基于Webkit的浏览器(Chrome或Safari):

设置基础:标记

让我们从标记开始,这是我们在网络上所做的一切。经典的翻转是通过图像和改变它来完成的SRC属性动态。这有效,但限制了我们一点。由于浏览器在这些日子里功能更强大,我们可以使用包含两个不同元素的元素,其中一个元素将是第一个或面前我们的翻转状态,另一个,将是背部州。这些可以是任何东西 - 只要它们具有相同的大小。举个例子,让我们看一下嵌套在图中的两个图像的链接:

Mozilla开发者网络HTML5

转移z-index:所有浏览器的简单翻转

将这些转换为翻转的最基本方法是给它们提供z索引并切换它们以实现效果。 CSS的内容非常简单:

.rollover {position:relative;宽度:200px;身高:200px; display:block;}。front {z-index:2;位置:绝对;背景:#fff;}。后{z-index:1;位置:绝对; background:#fff;}。rollover:hover .back,.rollover:focus .back {z-index:2;}。rollover:hover .front,.rollover:focus .front {z-index:1;}

我们给出链接尺寸,我们将它相对定位并将其显示为块元素。然后我们定位两个面前背部绝对的元素,这意味着它们在父元素中位于0,0时彼此覆盖。我们给予面前比z更高的z指数背部。当我们将鼠标悬停在链接上或使用键盘将其聚焦时(想想辅助功能),我们会切换两个元素的z-index。因此,我们有一个翻转,适用于今天使用的所有浏览器,因为z-index已经支持了很长时间。

顺利进行:添加褪色

在我们得到z-index之后,不透明度获得了更广泛的支持。这不仅可以隐藏和展示东西,还可以让它们“透视”。对于翻转,我们可以使用它来平滑地将一个状态淡入另一个状态。这需要CSS转换和不透明度的变化。当我们添加到原始翻转类时,不需要弄乱z-index,因为不透明度为0的更高的z-index仍然是不可见的。请注意,您需要将之前的翻转标记嵌入到该类的另一个元素中褪色得到结果。

.fade .rollover .front {opacity:1;转换:1s;}。淡出.rollover .back {不透明度:0;转换:1s;}。淡出.rollover:hover .front,.fade .rollover:focus .front {opacity:0;} .fade .rollover:hover .back,.fade .rollover:focus .back {opacity:1; }

这很简单:我们设置了不透明度面前到1和背部为0并在翻转状态下将其反转。该过渡:1s告诉浏览器在一秒钟内逐步完成此操作。这意味着两个国家相互平滑地褪色。由于我们没有定义应该转换的内容,因此浏览器只需从一个设置移动到另一个设置,而无需我们做任何事情。

更深入:翻转过渡

很长一段时间以来,从手机上的Webkit和桌面CSS上的Safari开始,我们也可以进入3D空间。我们可以使用它来创建一个翻转效果,看起来我们正在用两侧的每个徽标转动一张卡片。

.flip .rollover {perspective:800px;}。flip .cube {height:200px;宽度:200px; transform:rotateX(0)rotateY(0)rotateZ(0); transition:1s;}。flip .front {transform:translate3d(0,0,1px);}。flip .back {transform:rotateY(180deg)translate3d(0,0,0);}。flip .rollover:hover。 cube,.flip .rollover:focus .cube {transform:rotateY(180deg);}

现在发生了什么事?我们现在正在进入3D空间,就是这样。通过为我们的翻转提供800像素的视角,我们告诉浏览器我们想要一个距离屏幕800像素的3D空间。此数字越小,3D效果越明显,使用更高数字时更微妙。我们为立方体元素添加一个尺寸,并将其预设为不围绕任何轴旋转。我们还给它一秒钟的过渡。

3D空间由三个轴组成,X轴从左到右,Y轴从下到上,Z轴到达距离。该Translate3dCSS的转换允许我们在x,y和z的顺序上移动任何元素。该RotateX旋转YRotateZ转换围绕相应的轴旋转元素。还有平移X平移YTranslateZ但使用Translate3d更短并触发硬件加速。

如果你想玩这个来解决它,请点击下面的图片检查CSS 3D测试器:

The 3D CSS Tester allows you to play around with transformations and rotations and makes it more obvious showing you the axes and the plan you rotate

3D CSS测试仪允许您使用变换和旋转,并更明显地显示您旋转的轴和计划

背部?或者已经和我在一起?好。现在,对于翻转效果,我们需要做的就是移动面前沿x轴的一个像素并旋转背部180度。这是必要的,因为没有它,徽标将从后面显示并镜像。然后翻转效果旋转立方体元素大约180度,因为它有一个过渡,它顺利完成。现在我们围绕y轴有一个卡片翻转效果。

往上走?

如果您想在空间中倾斜徽标而不是从左向右旋转它们,我们也可以这样做。除了我们旋转两个立方体背部围绕x轴:

.up {transform:translate3d(0,0,1px);}。up .back {transform:rotateX(180deg)translate3d(0,0,0);}。up .rollover:hover .cube,.up。翻转:焦点.cube {transform:rotateX(180deg);}

给它更深度:立方体翻转

现在,如果我们沿z轴移动两个图像,那么我们可以将翻转效果转换为立方体效果。我们需要做的就是改变z值Translate3d100px的并缩放图像(因为它们现在在3D空间中进一步向观察者移动):

.box .front {transform:translate3d(0,0,100px)scale(0.85,0.85);}。box .back {transform:rotateY(180deg)translate3d(0,0,100px)scale(0.85,0.85);}

不看后面!

盯着人们的背后是很粗鲁的,所以HTML元素可能也是如此吗?如果您不想显示旋转元素的背面,可以设置背面能见度。在翻转的情况下,这意味着我们在整个构造旋转时一次只能看到一个徽标:

hideback .front,.hideback .back {backface-visibility:hidden;}

神圣的轮换,蝙蝠侠

转换和转换可以让我们走得很远,但是你不能使用转换来多次旋转对象。因此,如果我们想要制作更复杂的翻转效果,我们可以使用CSS动画

.nananana .rollover {perspective:800px;}。nananana .rollover:hover .front,.nananana .rollover:focus .front {background:transparent; z-index:10;动画:蝙蝠侠1s 2替代线性;} @keyframes蝙蝠侠{0%{变换:缩放(1,1)rotateZ(0); } 100%{transform:scale(0,0)rotateZ(720deg);不透明度:0; }}

为了在翻滚时做这个老派的蝙蝠侠动画我们需要面前获得更高的z-index并调用一个名为batman的1秒动画。我们以交替的方向和线性方式运行动画两次(轻松,在这种情况下预设看起来很奇怪)。在动画关键帧中,我们将缩放从1移动到0,从而缩小了面前并将其从0度旋转到720度,这是两整圈。

进一步发展

嗯,这是现在的开始。使用CSS文件并将其应用于几个不同的元素。这些都不需要图像,您也可以旋转名片或视频。当然,我们现在可以使用CSS矩阵,多媒体,WebGL,渐变和许多其他东西做更多的事情。然而,就像一切美丽而闪亮的东西一样,温和自己也许是好事。我希望你有一个想法,不告诉别人他们“需要浏览器X”或“电话Y”。 Web技术的优点在于我们可以将它们的工作原理赋予它们工作的环境,而不是依赖于某种现状。



翻译字数超限