3d长方体

html

<div class="main">

    <div class="a1">1</div>

    <div class="a2">2</div>

    <div class="a3">3</div>

    <div class="center"></div>

    <div class="a4">4</div>

    <div class="a5">5</div>

    <div class="a6">6</div>

</div>

css

    div.main{

	   width: 300px;

	   height: 300px;

	   margin: 100px auto;

	   perspective: 600px;/*3D元素距视图的距离，子元素会获得透视效果*/

	   perspective-origin: -100% 50%;/*3D元素所基于的X轴和Y轴*/

	   transform-style: preserve-3d;/*如何在 3D 空间中呈现被嵌套的元素。*/

	}

	div *{

	   width: 300px;

	   height: 300px;

	   line-height: 300px;

	   position: absolute;

	   text-align: center;

	   font-size: 100px;

	}

	div.center{

	   border: red 1px dashed;

	}

	div.a1{

	   background-color: rgba(209, 89, 255, 0.42);

	   transform: translateZ(150px);

	}

	div.a2{

	   background-color: rgba(95, 255, 195, 0.42);

	   transform: translateZ(-150px);

	   /*translateZ()：X平移，rotateY()：Y旋转*/

	}

	div.a3{

	   background-color: rgba(255, 158, 85, 0.42);

	   transform: translateX(150px) rotateY(90deg);

	}

	div.a4{

	   background-color: rgba(255, 146, 249, 0.42);

	   transform: translateX(-150px) rotateY(90deg);

	}

	div.a5{

	   background-color: rgba(82, 31, 255, 0.42);

	   transform: translateY(150px) rotateX(90deg);

	}

	div.a6{

	   background-color: rgba(166, 255, 56, 0.42);

	   transform: translateY(-150px) rotateX(90deg);

	}

巴特西

3d长方体

最新文章

热门文章