CSS开关按钮样式详解(2)

现在，我们要做一点不一样的事了。我们将会创建一个翻转风格的switcher开关。默认视图为灰色，并显示“No”（或任何表示未选中的内容），勾选后的视图则为绿色，并显示“Yes”。当点击label时，swithcer会沿Y轴翻转180度。我们将使用“data-attributes”来填充未选中/已选中时内容。这些“data-attributes”在HTML中由“data-on”和“data-off”指定，他们将分别填充到:after和:before两个伪元素中。请注意:after伪元素中的backface-visiibility属性，由于起点是-180度，通过这个属性可以隐藏背面的内容。

（编辑：ASP站长网）