CSS 防止旋转变换影响 :before 元素

Question

我正在尝试让复选框显示在其倾斜的 "span" 标签下方。但是，应用于 "span" 的转换也应用于使用“:before”选择器创建的自定义复选框。如何防止自定义复选框旋转 45 度，并使其直接显示在其标签下方？

.slanted_chkbx {
  margin-top: 25px;
}

.slanted_check {
  margin-left: 5px;
  margin-right: 15px;
  display: inline-block;
  position: relative;
}

.slanted_check span {
  position: absolute;
  top: -20px;
  left: .7em;
  transform-origin: bottom left;
  transform: rotate(-45deg);
}

.custom_check {
  display: none;
}

.custom_check + span:before {
  content: '';
  display: block;
  cursor: pointer;
  width: 10px;
  height: 10px;
  left: 0;
  top: 0;
  position: absolute;
  border: 2px solid #111111;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.custom_check:checked + span:before {
  width: 5px;
  top: -2px;
  left: 2px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div class="slanted_chkbx">
  <label class="slanted_check">
    <input type="checkbox" class="custom_check" name="option_one" value="option_one">
    <span>One</span>
  </label>
  <label class="slanted_check">
    <input type="checkbox" class="custom_check" name="option_two" value="option_two">
    <span>Two</span>
  </label>
  <label class="slanted_check">
    <input type="checkbox" class="custom_check" name="option_three" value="option_three">
    <span>Three</span>
  </label>
</div>

Answer 1

您需要将反向变换放在伪元素的基础状态上，而不是悬停状态。

.slanted_chkbx {
  margin-top: 25px;
}

.slanted_check {
  margin-left: 15px;
  margin-right: 15px;
  display: inline-block;
  position: relative;
}

.slanted_check span {
  margin-right: -25px;
  display: inline-block;
  transform-origin: bottom left;
  transform: rotate(-45deg);
}

.custom_check {
  display: none;
}

.custom_check+span:before {
  content: '';
  display: block;
  cursor: pointer;
  width: 10px;
  height: 10px;
  left: -15px;
  bottom: -10px;
  position: absolute;
  border: 2px solid #111111;
  -webkit-transition: all .2s;
  transition: all .2s;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.custom_check:checked+span:before {
  width: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
}

<div class="slanted_chkbx">
  <label class="slanted_check">
    <input type="checkbox" class="custom_check" name="option_one" value="option_one">
    <span>One</span>
  </label>
  <label class="slanted_check">
    <input type="checkbox" class="custom_check" name="option_two" value="option_two">
    <span>Two</span>
  </label>
  <label class="slanted_check">
    <input type="checkbox" class="custom_check" name="option_three" value="option_three">
    <span>Three</span>
  </label>
</div>

我不完全确定你在检查状态下想要什么效果，所以我没有调整它。

CSS 防止旋转变换影响 :before 元素

CSS prevent rotation transform from affecting :before elements

html

css

checkbox

css-transforms