首页 > 代码库 > css3魔方(一)---立方体
css3魔方(一)---立方体
一、魔方由3面，每面9个，一共27个立方体组成，所以要完成魔方的制作，先拆分成单个立方体的制作
先上代码index.html
<!DOCTYPE html><html><head> <title>CSS魔方</title> <meta name="author" content="ChenLiang"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/cube.css"></head><body><div class="stage"> <div class="cube"> <div class="front style"></div> <div class="back style"></div> <div class="left style"></div> <div class="right style"></div> <div class="top style"></div> <div class="bottom style"></div> </div></div></body></html>
1、一个立方体有6个面，分为前后左右上下（fron、back、left、right、top、bottom），定义6个div
2、为了使立方体有3D效果，要使用到transform-style和perspective
.stage{ position: absolute; width: 100%; height: 100%; -webkit-perspective: 2500px; background: #333;}.cube{ width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(45deg) rotateY(-45deg);}
perspective 属性定义 3D 元素距视图的距离，以像素计；（可以实际修改像素值看看变化）
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素，及被它包含的子元素具有3D效果
3、绘制6个面，需要在3D空间总分别移动各个面到相应的位置，要使用到translateX、translateY、translateZ、rotateX、rotateY、rotateZ
translateX:沿X轴向左（右）移动距离
rotate:绕X轴旋转度数
移动、旋转围绕的点和边默认为div的中心点，可以使用transform-origin改变
①transform-origin:center center (默认，第一个参数为X轴，第一个参数为Y轴，第三个参数z轴这里不考虑)
此时rotateY(45deg)即绕着b旋转45度
②transform-origin:left (未修改的默认为center)
此时rotateY(45deg)即绕着b旋转45度
4、cube.css
*{ margin: 0; padding: 0}.stage{ position: absolute; width: 100%; height: 100%; -webkit-perspective: 2500px; background: #333;}.cube{ /*background: #333;*/ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(45deg) rotateY(-45deg);}.style{ position: absolute; width: 300px; height: 300px; border: 2px solid #333;}/*前面 沿着Z轴前移150px*/.cube .front{ background: #FFFF00; transform: translateZ(150px); -ms-transform: translateZ(150px); -webkit-transform: translateZ(150px);}/*后面 沿着Z轴后移150px*/.cube .back{ background: #009f41; transform: translateZ(-150px) rotateY(180deg); -ms-transform: translateZ(-150px) rotateY(180deg); -webkit-transform: translateZ(-150px) rotateY(180deg);}/*左面 沿着Y轴旋转270度，然后沿着X轴左移一半*/.cube .left{ background: #d50010; transform: rotateY(270deg) translateX(-50%); -ms-transform: rotateY(270deg) translateX(-50%); -webkit-transform: rotateY(270deg) translateX(-50%); transform-origin: left;}/*右面 沿着Y轴旋转-270度，然后沿着X轴右移一半*/.cube .right{ background: #fe8a0a; transform: rotateY(-270deg) translateX(50%); -ms-transform: rotateY(-270deg) translateX(50%); -webkit-transform: rotateY(-270deg) translateX(50%); transform-origin: right;}/*上面 沿着X轴旋转-270度，然后沿着Y轴上移一半*/.cube .top{ background: #00469f; transform: rotateX(-270deg) translateY(-50%); -ms-transform: rotateX(-270deg) translateY(-50%); -webkit-transform: rotateX(-270deg) translateY(-50%); transform-origin: top;}/*下面 沿着X轴旋转270度，然后沿着Y轴下移一半*/.cube .bottom{ background: #fff; transform: rotateX(270deg) translateY(50%); -ms-transform: rotateX(270deg) translateY(50%); -webkit-transform: rotateX(270deg) translateY(50%); transform-origin: bottom;}
css3魔方(一)---立方体
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。