首页 > 代码库 > CSS3 3D 盒子模型
CSS3 3D 盒子模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><style>*{ margin:0; padding:0;}ul,li{ list-style: none;}.wrap{ width:200px; height:200px; border:1px solid blue; margin:150px auto; perspective:500px;}.box{ width:150px; height:150px; position:relative; transform-origin:center center 75px; transform-style:preserve-3d; transition:1s;}.box li{ width:150px; height:150px; position: absolute; text-align: center; line-height:150px;}.box li:nth-of-type(1){ background:blue; left:-150px; transform-origin:right; transform:rotateY(90deg);}.box li:nth-of-type(2){ background:red; left:150px; transform-origin:left; transform:rotateY(-90deg);}.box li:nth-of-type(3){ background:gray; top:150px; transform-origin:top; transform:rotateX(90deg);}.box li:nth-of-type(4){ background:pink; top:-150px; transform-origin:bottom; transform:rotateX(-90deg);}.box li:nth-of-type(5){ background:purple; transform:translateZ(150px);}.box li:nth-of-type(6){ background:green; z-index:-1;}</style><body> <div class="wrap"> <ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div></body></html><script> var num = 0; var oBox = document.querySelector(‘.box‘); setInterval(function(){ num--; oBox.style.transform=‘rotateY(‘+num*90+‘deg)‘; },3000);</script>
CSS3 3D 盒子模型
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。