样式(8) -- checkbox8

preview

demo预览

checkbox8

description

1.可调节数据：

$checkboxSize: 3em;
$checkboxWidthTimes: 3;
$checkboxFontSizeTimes: 0.6;
$checkboxFontSize: $checkboxSize * $checkboxFontSizeTimes;
$checkboxWidth: $checkboxSize * $checkboxWidthTimes;
$checkboxBackgroundColorForOFF: tomato;
$checkboxBackgroundColorForON: limegreen;
$checkboxTextForOFF: "OFF";
$checkboxTextForON: "ON";
$toggleSpeed: 0.3s;

2.详细描述

transform-origin 用于定义 transform 行为的原点（中心），可以传三个参数，分别是 x 偏移量，y 偏移量，z 偏移量；
x 偏移量 / y 偏移量 可以是 length 或 percentage (百分比)
z 偏移量只能是 length
默认情况下，三个偏移量的值是：50% 50% 0；
还可以用 top / center / bottom 表示 y 偏移 0，50%，100%； left / center / right 表示 z 偏移 0，50%，100%；
在使用 top …… right 之类的时候，x / y 偏移量的参数位置可以交互。

transform-origin 可以跟 1 ~ 3 个值，后面的值取用默认值。

scss

/* html
<div class="checkboxWrapper">
    <input type="checkbox" value="" id="myCheckbox" name="slide" checked>
    <label for="myCheckbox">
      <div class="flipCard"></div>
    </label>
</div>
*/

* { padding: 0; margin: 0; box-sizing: border-box; }
*::before, *::after{ box-sizing: border-box; }

body {
  margin: 60px;
  background-color: #eee;
}

$checkboxSize: 2em;
$checkboxWidthTimes: 3;
$checkboxFontSizeTimes: 0.6;
$checkboxFontSize: $checkboxSize * $checkboxFontSizeTimes;
$checkboxWidth: $checkboxSize * $checkboxWidthTimes;
$checkboxBackgroundColorForOFF: tomato;
$checkboxBackgroundColorForON: limegreen;
$checkboxTextForOFF: "OFF";
$checkboxTextForON: "ON";
$toggleSpeed: 0.3s;


.checkboxWrapper {
  display: block;
  width: $checkboxWidth;
  height: $checkboxSize;
  line-height: $checkboxSize;

  & label{
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: relative;
    perspective: 200px;

    & .flipCard, &::before, &::after {
      position: absolute;
      height: 100%;
      width:  50%;
      text-align: center;
    }

    &::before, &::after {
      content: $checkboxTextForON;
      font-size: $checkboxFontSize;
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
      content: $checkboxTextForOFF;
    }

    & .flipCard {
      left: 50%;
      display: block;
      background-color: $checkboxBackgroundColorForOFF;
      transition: all $toggleSpeed ease;
      z-index: 1;
      transform: rotateY(-180deg);
      transform-origin: center left;
      transform-style:preserve-3d;
    }
  }

  & input {
    display: none;

    &:checked + label .flipCard {
      background-color: $checkboxBackgroundColorForON;
      transform: rotateY(0deg);
    }
  }
}

素材参考：https://codepen.io/bennettfeely/pen/LKjmA