Javascript toggle & CSS 範例2

				
					<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
  
  <style type="text/css">
    .all{
      background-color: #eee;
      perspective: 500px;
      position: relative;
      top:100px;
      left:100px;
    }
    
    
    #p1{
      width: 100px;
      height: 200px;
      background-color: #fc0;
      display: inline-block;
      transform: rotateY(75deg);
      transform-origin: 50% 100%;
      transition: 0.5s;
      background-image: URL('https://daco.cloudaccess.host/wp-content/uploads/2021/10/timo-wielink-4Zk45jNyQS4-unsplash.jpg');
  background-repeat: no-repeat;
  background-size: cover;
    }
    
    #p1.active{
      transform: rotateY(75deg)rotateX(-90deg);
      transition: 0.5s ease-in;
    }
    

    
        #p2{
      width: 100px;
      height: 200px;
      background-color: #c90;
      display: inline-block;
      transform: rotateY(75deg)translateX(-27px);
      transition: 0.5s;
      transform-origin: 50% 100%;
     
    }
    
        #p2.active{
      transform: rotateY(75deg)rotateX(-90deg)translateX(-27px);
      transition: 0.5s 200ms ease-in;
    }
    
    
        #p3{
      width: 100px;
      height: 200px;
      background-color: #cc9;
      display: inline-block;
      transform: rotateY(75deg);
      transition: 0.5s;
      transform-origin: 50% 100%;
    }
    
     #p3.active{
      transform: rotateY(75deg)rotateX(-90deg);
      transition: 0.5s 400ms ease-in;
     
    }
    
        #p4{
      width: 100px;
      height: 200px;
      background-color: #c99;
      display: inline-block;
      transform: rotateY(75deg);
      transition: 0.5s;
    transform-origin: 50% 100%;
    }
    
     #p4.active{
      transform: rotateY(75deg)rotateX(-90deg);
      transition: 0.5s 600ms ease-in;
      
    }

  </style>
  
  
</head>
<body data-rsssl=1>

 
  <div class="all" onMouseover="toggle();" onMouseout="toggle();">

    <div id="p1"></div><div id="p2"></div><div id="p3"></div><div id="p4"></div>
    
  </div>
  
  
  <script>
    function toggle(){
      document.getElementById("p1").classList.toggle("active");
    document.getElementById("p2").classList.toggle("active");
      document.getElementById("p3").classList.toggle("active");
      document.getElementById("p4").classList.toggle("active");
    }
  </script>  
  
  
</body>
</html>
				
			

試試看這個...