preview

demo預(yù)覽

checkbox8

description

1.可調(diào)節(jié)數(shù)據(jù)：

$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.詳細(xì)描述

transform-origin 用于定義 transform 行為的原點(diǎn)（中心）瞧挤，可以傳三個(gè)參數(shù)，分別是 x 偏移量饿悬，y 偏移量驰坊，z 偏移量；
x 偏移量 / y 偏移量 可以是 length 或 percentage (百分比)
z 偏移量只能是 length
默認(rèn)情況下，三個(gè)偏移量的值是：50% 50% 0鞋邑；
還可以用 top / center / bottom 表示 y 偏移 0，50%账蓉，100%枚碗； left / center / right 表示 z 偏移 0，50%铸本，100%肮雨；
在使用 top …… right 之類的時(shí)候，x / y 偏移量的參數(shù)位置可以交互箱玷。

transform-origin 可以跟 1 ~ 3 個(gè)值怨规，后面的值取用默認(rèn)值。

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