3D正方体制作（源码）

最新推荐文章于 2023-11-24 18:21:25 发布

执念MJ

最新推荐文章于 2023-11-24 18:21:25 发布

阅读量238

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/AMD23/article/details/119168618

版权

<style>

*{padding: 0; margin: 0;}

ul{list-style:none;}

.box{width: 300px; height: 300px; border:1px solid blueviolet; margin: 50px auto; perspective: 200px;}

.box ul{width: 100px; height: 100px; margin:100px; position: relative; transform-style:preserve-3d;

transition: 2s; transform-origin: center center -50px;}

.box ul li{width: 100px; height: 100px; position:absolute; line-height: 100px; text-align: center;color: white; font-size: 28px;}

.box ul li:nth-child(1){background:red; left: 0; top:0;}

.box ul li:nth-child(2){background:forestgreen; left: 100px; top:0; transform-origin: left; transform:rotateY(90deg);}

.box ul li:nth-child(3){background:dodgerblue; left: -100px; top:0; transform-origin: right;transform:rotateY(-90deg);}

.box ul li:nth-child(4){background:orangered; left: 0; top:-100px; transform-origin: bottom;transform: rotateX(90deg);}

.box ul li:nth-child(5){background:pink; left: 0; top:100px; transform-origin: top; transform: rotateX(-90deg);}

.box ul li:nth-child(6){background:grey; left: 0; top:0; transform:translateZ(-100px) rotateY(180deg);}

.box:hover ul{ transform: rotateY(360deg);}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

关注