<div id="app">
  
</div>              
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #40f, #05f);
}
import React,{useState, StrictMode,useEffect} from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import {motion} from "https://esm.sh/framer-motion@8.3.3";


const App = function() {
  
  const [isRotated, setRotate] = useState(false)
  
  
  return (
    <div
      style={{
        display:'flex',
        flexDirection:'column',
        gap:30
      }}
      >
      <motion.div
      style={{
        width:100,
        height:100,
        backgroundColor:'white',
        borderRadius:'20px'
      }}
    
      animate={{
          rotate:isRotated ? 45 : 0
        }}
      >
    </motion.div>
      
      
      
      <div
         style={{
          backgroundColor:'white',
          display:'flex',
          justifyContent:'center',
          padding:6,
          fontFamily:'system-ui',
          color:'white',
          backgroundColor:'black',
          borderRadius:20,
          fontSize:14,
          letterSpacing:2,
          cursor:'pointer'
        }}
        onClick={()=>{
          setRotate(!isRotated)
        }}
        >点击切换</div>
    </div>

  )
}

const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
 <StrictMode>
    <App />
  </StrictMode>
)

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.