Realize the card left and right rotation dynamic effect

The perspective of the use

Recent projects often need to use CSS to achieve dynamic effect, here is a record of a card left and right stereo rotation of dynamic effect.

RotateY is used for rotation, but the effect is as follows, it looks like mechanical expansion rather than rotation, lack of three-dimensional look and feel.

This requires setting the value of the perspective to adjust the visual distance and achieve a three-dimensional visual effect 👇

import React, { useState } from 'react'
import './Demo.less'

const Demo = () = > {
  const [rotate, setRotate] = useState(false)

  const rotateFn = () = >{ setRotate(! rotate) }return (
    <div className="Demo">
      <img
        src="Https://img2.baidu.com/it/u=2130627046, 4274739062 & FM = 26 & FMT = auto&gp = 0. JPG"
        alt=""
        onClick={rotateFn}
        className={rotate ? 'rotate-style' :"'} / >
    </div>)}export default Demo
Copy the code

.Demo {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  img {
    width: 100%;
  }
  @keyframes rotate {
    25% {
      transform: perspective(400px) rotateY(-45deg);
    }
    75% {
      transform: perspective(400px) rotateY(45deg);
    }
    100% {
      transform: perspective(400px) rotateY(0); }}.rotate-style {
    animation: rotate 1.5 sinfinite linear; }}Copy the code

IOS Compatibility Issues

IOS elements with a CSS attribute perspective can be buggy. The phenomenon is that when the upper element rotates on the Y or X axis, the upper element may be trapped in the lower element, presumably because of the rotation. This creates a strange flicker as the element rotates along the XY axis. The solution is to add CSS attributes to the parent element: transform: translateY(0) rotateZ(0deg); Can.