CSS转换旋转闪烁/不工作

问题描述

我遇到了这个问题，我试图在悬停时旋转此div，但是当我悬停时，它会尝试悬停，但随后又回到正常位置。能否请你帮忙？ 这是我的小提琴：https://jsfiddle.net/Lcb7okfn/

class SecondViewController: UIViewController {

    @IBOutlet weak var stepper: UIStepper!
    @IBOutlet weak var label: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
    
        if let value = UserDefaults.standard.value(forKey: "Stepper") as? Double {
            stepper.value = value
            label.text = String(describing: value)
        }
    }

    @IBAction func didChangeStepper(_ sender: UIStepper) {
        label.text = String(describing: sender.value)

        // save the changed value to UserDefaults
        UserDefaults.standard.setValue(sender.value,forKey: "Stepper")
        //Post to Notification Center that the value has changed
        NotificationCenter.default.post(Notification.init(name: Notification.Name("stepperDidChangeValue")))
    }

}

解决方法

将鼠标悬停在父元素上，然后将透视图声明移到父元素：

.section-tours {
  background-color: pink;
  padding: 5rem 0 50rem 0;
}

.center-text {
  background-color: blue;
  padding: 30px 0;
}

h2 {
  padding: 0;
  margin: 0;
}

.col-1-of-3 {
  width: calc((100%-20px)/3);
  perspective: 1000px;
}

.card {
  background-color: orange;
  height: 15rem;
  transition: all .8s;
}

.col-1-of-3:hover .card {
  transform: rotateY(180deg);
}

<section class="section-tours">
  <div class="center-text">
    <h2>
      Most popular tours
    </h2>
  </div>
  <div class="row">
    <div class="col-1-of-3">
      <div class="card">
        <div class="card class_side">
          TEXT
        </div>

      </div>
    </div>
    <div class="col-1-of-3">

    </div>
    <div class="col-1-of-3">

    </div>
  </div>
</section>