CSS предотвращает влияние преобразования вращения: перед элементами - PullRequest
Новая
       5

CSS предотвращает влияние преобразования вращения: перед элементами

0 голосов
/ 29 февраля 2020

Я пытаюсь, чтобы флажки появились под их наклонной меткой "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>

1 Ответ

3 голосов
/ 29 февраля 2020

Необходимо поместить обратное преобразование в базовое состояние псевдоэлемента, а не в состояние наведения. 

.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>

Я не совсем уверен, какой эффект вы получите в проверенном состоянии, поэтому я не настроил его.

...