CS3의 3D 투명 입체 상자 구현

2970 단어
CSS3를 사용하여 투명한 3D 입체 상자 만들기
입방체는 6개의 면으로 구성되어 상하좌우와 전후로 나뉘어져 있음을 분명히 해야 한다. 이런 것들을 고려하면 CSS3의 코드를 더욱 잘 융합시킬 수 있다.
그래서 나는 입방체의 6개의 면으로 6개의div를 설정했다
위치를 정하기 때문에 처음에는 모든 상자가 화면 이쪽을 마주하고 있기 때문에 면마다 다른 값, 즉 다른 위치를 부여해야만 그것이 드러날 수 있다.
.trangel div:nth-of-type(1){
		left: 0;
		top:-100px;
	    background: -webkit-radial-gradient(rgba(20, 20, 20, 0.1), #000000);
		-webkit-transform-origin:bottom;    /*           :     */
		-webkit-transform: rotateX(90deg);  /*    90°*/
				
	}

이상은 첫 번째 상자의 스타일입니다. 먼저 위로 -100px 거리를 이동한 다음에 수직으로 90° 회전합니다.
한 면을 만들었으니 다른 면은 이해하기 쉽다.
코드 주석이 있으니 빨리 가서 스스로 효과를 실현해라!!!
다음은 모든 코드입니다.


	
		
		
<style>
	.wrap{
		width: 100px;
		height: 100px;
		padding: 100px;
		border: 1px solid black;
		margin: 50px auto;
		position: relative;
		-webkit-perspective-origin:right top;  /*   */
		-webkit-perspective:600px;			/*      */
		}
	.trangel{
		width: 100px;
		height: 100px;
		position: relative;
		-webkit-transform-style: preserve-3d;	/*  3D    */
		transition: 1s all;  /*         */
		}
	.trangel div{
		position: absolute;
		width: 100px;
	     height: 100px;		
		color: #fff;
		line-height: 100px;
		text-align: center;
				
	}
	.trangel div:nth-of-type(1){
		left: 0;
		top:-100px;
		background: -webkit-radial-gradient(rgba(20, 20, 20, 0.1), #000000);
		-webkit-transform-origin:bottom;    /*           :     */
		-webkit-transform: rotateX(90deg);  /*    90°*/			
	}
	.trangel div:nth-of-type(2){
		left: -100px;
		top: 0;
		background: -webkit-radial-gradient( #000000, rgba(20, 20, 20, 0.1));
		-webkit-transform-origin: right;
		-webkit-transform: rotateY(-90deg);
	}
	.trangel div:nth-of-type(3){
		background: -webkit-radial-gradient( #000000, rgba(20, 20, 20, 0.1));
		left: 0px;
		top: 0;				
		}
	.trangel div:nth-of-type(4){
		left: 0px;
		top: 100px;
		background: -webkit-radial-gradient(rgba(0, 0, 0, 0), #000000);
		-webkit-transform-origin: top;
		-webkit-transform: rotateX(-90deg);
	}
	.trangel div:nth-of-type(5){
		left: 100px;
		top: 0px;
		background: -webkit-radial-gradient(#000000, rgba(20, 20, 20, 0.1));
		-webkit-transform-origin:left;
		-webkit-transform: rotateY(90deg);
	}
	.trangel div:nth-of-type(6){
		left: 0px;
		top: 0px;
		background: -webkit-radial-gradient(#000000, rgba(20, 20, 20, 0.1));
		-webkit-transform:translateZ(-100px) rotateX(180deg);
	}
	.wrap:hover .trangel{
		-webkit-transform: rotateX(180deg) rotateY(360deg) rotateZ(20deg);
	}
		</style>
	
	
		<div class="wrap">
			<div class="trangel">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>			
		</div>
	

</code></pre> 
 </div> 
</div>
                            </div>
                        </div>

좋은 웹페이지 즐겨찾기