CSS3 입방체 윤방도 만들기

효과도
실현 원리
은 무질서한 목록 ul을 사용하고 그 아래에 6개의 서브원소 li이 있는데 이것은 장방체의 6개 면을 대표한다. 에서 주로 사용하는 속성:
104591710 104591410은 104591410을 회전시킨 후에 이동한다. 이렇게 하면 두 가지 장점이 있다. 첫째, 규칙적이고 기억하기 쉽다. 매번 104591410의 값만 바꾸면 되고 매번 90o가 커지면 104591410의 값은 바꿀 필요가 없기 때문이다.하지만 이건 부차적인 거야.2. 주로 그림이 아래에서 회전하는데 그림의 방향이 모두 정확하고 위아래가 뒤바뀌지 않는다.그러나 주의해야 할 것은 회전한 후에 좌표축도 따라서 회전한다
104591710 104591410에 이 속성을 추가하여 104591410이 입체적인 효과로 104591810을 나타낼 수 있도록 합니다.
104591710 104591410은 104591410의 부모 요소에 이 속성을 추가합니다. 이 예에서는 104591410입니다.회전은 전체 transform: rotateX(n deg) translateZ(n px)이 회전하고 있기 때문에 li에 가깝고 먼 효과가 있어야 한다.

rotateX(), 용기를 움직여라.

주의점: 사실 처음에는 정방체로 만들어졌지만 장방체로 표시되어 있다. 정방체에서 장방체로 변하려면 앞뒤 상하 네 면을 길게 뻗으면 된다. translateZ().
원본 코드

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title>       </title>
   <style type="text/css">
   		body,ul{
   			margin: 0;
   			padding: 0;
   		}
   		body{
   			background-color: #EEEEEE;
       		perspective: 800px; /*   ul    3D  ，  ul     body       */
   		}
   	ul {
   	 	width: 200px;
		height: 200px;
   	 	margin: 200px auto;
       	transform-style: preserve-3d;
   		position: relative;
   		transform: rotateX(0deg);
      	animation: rot 10s linear 0s infinite normal;
     }
     @keyframes rot {
         0% {
             transform:rotateX(0deg);
         }
         100% {
             transform:rotateX(360deg);
         }
     }
     ul>li{
   		list-style: none;
      	width: 200px;
      	height: 200px;
   		background-color: #424242;
   		position: absolute;
   		top: 0;
   		left: 0;
     }
   		ul:hover{  /* ul   ，    */
   			animation-play-state: paused;
   		}
   		ul:hover li>img{
   			opacity: 0.5;
   		}
   		ul>li:hover img{
   			opacity: 1;
   		}
     ul>li:nth-child(1){
       transform: rotateX(90deg) translateZ(100px) scale(2,1);
     }
     ul>li:nth-child(2){
   		transform: rotateX(180deg) translateZ(100px) scale(2,1);
     }
     ul>li:nth-child(3){
       transform: rotateX(270deg) translateZ(100px) scale(2,1);
     }
     ul>li:nth-child(4){
       transform: rotateX(360deg) translateZ(100px) scale(2,1);
     }
     ul>li:nth-child(5){
       transform: rotateY(90deg) translateZ(-200px);
     }
     ul>li:nth-child(6){
       transform: rotateY(90deg) translateZ(200px);
     }
   </style>
   </head>
   <body>
   	<!--                         ，scale(2,1) -->
   	<!--   ：scale()，               -->
     <ul>
       <li><img src="./images/img6.jpg"></li><!--    -->
       <li><img src="./images/img7.jpg"></li><!--    -->
       <li><img src="./images/img8.jpg"></li><!--    -->
       <li><img src="./images/img9.jpg"></li><!--    -->
       <li>5</li><!--    -->
       <li>6</li><!--    -->
     </ul>
   </body>
</html>

CSS3 입방체 윤방도 만들기

좋은 웹페이지 즐겨찾기