मैं सीएसएस रोटेट() के साथ एक div में कुछ एनीमेशन करने की कोशिश कर रहा हूं, लेकिन जाहिर है कि यह केवल तभी काम करता है जब मैं लेबल की जांच करता हूं, जब मैं दोबारा जांच करता हूं तो मानक डिस्प्ले दिखाता हूं।

एक बोनस होगा यदि कोई मुझे उस div को स्थिति में लाने में मदद करता है जिसका उपयोग मैं #rotator से पहले, लंबवत के बाद करता हूं, इस तरह वे एक div को 45º दिखाते हैं।

उदाहरण: https://codepen.io/rafaart/pen/dyNjgeb ए>

    .ativar-dark{
    width: 50px;
    height: 50px;
    display: none;
}

#sky {
  background-color: black;
  position: absolute;
  overflow: hidden;
}
#rotator {
  position: relative;
  width: 7rem;
  height: 7rem;
  transform: rotate(-45);
  border-radius: 50%;
  border: 2px solid red;
  margin: 3rem;

}

label{
  cursor: pointer;
}

#rotator:before, #rotator:after {
  position: absolute;
  content: '';
  display: block;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  animation: inherit;
  animation-direction: reverse;
}

#rotator:before {
  background-color: yellow;
  top: -.25rem;
  left: -.25rem;
}

#rotator:after {
  background-color: White;
  bottom: -.25rem;
  right: -.25rem;
}
.ativar-dark:checked ~ .container div{
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
  <label for="ativar-dark"> 
  <div id="rotator">
    
  </div>
    </label>
</div>
0
Half 18 अप्रैल 2021, 02:47

2 जवाब

सबसे बढ़िया उत्तर

मैंने कोड में कुछ बदलाव किए हैं। कृपया जांचें कि क्या यह आपकी आवश्यकता को पूरा करता है।

आपके इनपुट प्रकार में एक ही नाम का आईडी और वर्ग है। आपने CSS में .ativar-dark का उल्लेख किया है, लेकिन जब मैंने इसे #ativar-dark में बदल दिया तो यह ठीक काम कर रहा था जो थोड़ा अजीब है क्योंकि id और class का एक ही नाम हो सकता है।

.ativar-dark{
    width: 50px;
    height: 50px;
    display: none;
}

#sky {
  background-color: black;
  position: absolute;
  overflow: hidden;
}
#rotator {
  position: relative;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 2px solid red;
  margin: 3rem;
  transform: rotate(0deg); /*enter 0 deg in order to return back to the original position when unchecked */
  transition: all ease 2s; /* This will make sure it provides the animated effect when unchecked */

}

label{
  cursor: pointer;
}

#rotator:before, #rotator:after {
  position: absolute;
  content: '';
  display: block;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  animation: inherit;
  animation-direction: reverse;
}

#rotator:before {
  background-color: yellow;
  top: 2rem; /* Move the position of circle to center position */
  left: -1.25rem;
}

#rotator:after {
  background-color: White;
  bottom: 2rem; /* Move the position of circle to center position */
  right: -1.25rem;
}

#ativar-dark:checked ~ .container div{
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
  <label for="ativar-dark"> 
  <div id="rotator">
    
  </div>
    </label>
</div>
0
Chipsy 18 अप्रैल 2021, 07:06

आप रोटेशन तत्व के क्लिक पर रोटेशन प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करके दो वर्गों को टॉगल कर सकते हैं। HTML एलिमेंट में मौजूद एक से शुरू करें, फिर उन्हें क्लिक पर टॉगल करें।

let circle = document.getElementById('rotator')
circle.addEventListener('click', function(e) {
  e.target.classList.toggle('rotate')
  e.target.classList.toggle('reverse')
})
.ativar-dark {
  width: 50px;
  height: 50px;
  display: none;
}

#sky {
  background-color: black;
  position: absolute;
  overflow: hidden;
}

#rotator {
  position: relative;
  width: 7rem;
  height: 7rem;
  transform: rotate(-45);
  border-radius: 50%;
  border: 2px solid red;
  margin: 3rem;
}

label {
  cursor: pointer;
}

#rotator:before,
#rotator:after {
  position: absolute;
  content: '';
  display: block;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  animation: inherit;
  animation-direction: reverse;
}

#rotator:before {
  background-color: yellow;
  top: -.25rem;
  left: -.25rem;
}

#rotator:after {
  background-color: White;
  bottom: -.25rem;
  right: -.25rem;
}

.rotate {
  transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transition: all ease 2s;
}

.reverse {
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transition: all ease 2s;
}
<input type="checkbox" id="ativar-dark" class="ativar-dark">
<div class="container" id="sky">
  <label for="ativar-dark"> 
    <div id="rotator" class="reverse">

    </div>
  </label>
</div>
0
dale landry 18 अप्रैल 2021, 07:20