首页 > 代码库 > 立方体
立方体
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>立方体</title><style>.warp{ width:200px; height:200px; padding:200px; border:1px solid #000; perspective: 800px;}.box{ width:200px; height:200px; position: relative; transform-style: preserve-3d; transition: 1s all; transform: translateZ(-100px) rotateX(0);}.box div{ width:200px; height: 200px; position: absolute; font-size:100px; font-weight:bold; line-height:200px; text-align: center; color:#fff;}.box div:nth-of-type(1){ background-color:red;top:-200px;left:0; transform-origin: bottom; transform:translateZ(100px) rotateX(90deg);}.box div:nth-of-type(2){ background-color:blue;top:0;left:-200px; transform-origin: right; transform:translateZ(100px) rotateY(-90deg);}.box div:nth-of-type(3){ background-color:yellow;top:0;left:0; transform:translateZ(100px);}.box div:nth-of-type(4){ background-color:green;top:0;left:200px; transform-origin: left; transform:translateZ(100px) rotateY(90deg);}.box div:nth-of-type(5){ background-color:#000;top:200px;left:0; transform-origin: top; transform:translateZ(100px) rotateX(-90deg);}.box div:nth-of-type(6){ background-color:#f60;top:0;left:0; transform: translateZ(-100px) rotateX(180deg);}.warp:hover .box{ transform: translateZ(-100px) rotateX(180deg);}</style></head><body> <div class="warp"> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div></body></html>
立方体
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。