CSS3实现3d、过渡、变化案例

一开始盒子状态:

 过渡过程:

最终形式: 大盒子旋转180deg,小盒子跟着大盒子旋转然后展开。

代码实现 

body模块:

<body>
		<div class="stage">
			<div class="face1 face">前</div>
			<div class="face2 face">后</div>
			<div class="face3 face">左</div>
			<div class="face4 face">右</div>
			<div class="face5 face">上</div>
			<div class="face6 face">下</div>

			<div class="small1 small">前</div>
			<div class="small2 small">后</div>
			<div class="small3 small">左</div>
			<div class="small4 small">右</div>
			<div class="small5 small">上</div>
			<div class="small6 small">下</div>

		</div>
	</body>

CSS:

body{
			perspective:800px;
		}
		.stage{
			position:relative;
			width:200px;
			height:200px;
			margin:400px auto;
			box-shadow:0 0 15px #000 inset;
			transform-style:preserve-3d;
			transition:2s;
		}
			/*注意:因为position,所有的transform都是相对于父级元素来变化,因此把父级元素设置为舞台。*/
		.stage:hover{
			transform:rotateY(180deg);
		}
		.stage:hover .face5{
			transform:translateZ(100px) translateY(-200px);
				
		}
		.stage:hover .small1{
			transform:translateZ(100px) translateY(-300px);
		}
		.stage:hover .small2{
			transform:rotateY(180deg) translateZ(100px) translateY(-300px);
		}
		.stage:hover .small3{
			transform:rotateY(-90deg) translateZ(100px) translateY(-300px);
		}
		.stage:hover .small4{
			transform:rotateY(90deg) translateZ(100px) translateY(-300px);
		}
		.stage:hover .small5{
			transform:rotateX(90deg) translateZ(400px);
		}
		.stage:hover .small6{
			transform:rotatex(-90deg) translateZ(-200px);
		}
		.face{
			position:absolute;
			width:200px;
			height:200px;
			box-shadow:0 0 20px #554ee9 inset;
			transition:2s;
		}
		.small{
			position:absolute;
			right:50px;
			bottom:0px;
			width:100px;
			height:100px;
			box-shadow:0 0 5px #000 inset;
			transition:2s;
		}
		.face1{
			transform:translateZ(100px);
		}
		.face2{
			transform:rotateY(180deg) translateZ(100px);
		}
		.face3{
			transform:rotateY(-90deg) translateZ(100px);
		}
		.face4{
			transform:rotateY(90deg) translateZ(100px);
		}
		.face5{
			transform:rotateX(90deg) translateZ(100px);
		}
		.face6{
			transform:rotatex(-90deg) translateZ(100px);
		}
		.small1{
			transform:translateZ(50px);
		}
		.small2{
			transform:rotateY(180deg) translateZ(50px);
		}
		.small3{
			transform:rotateY(-90deg) translateZ(50px);
		}
		.small4{
			transform:rotateY(90deg) translateZ(50px);
		}
		.small5{
			transform:rotateX(90deg) translateZ(50px);
		}
		.small6{
			transform:rotatex(-90deg) translateZ(50px);
		}

 

展开阅读全文

没有更多推荐了,返回首页