* { margin:0; padding:0; } #container { position:absolute; left:50%; top:50%; width:312px; height:312px; margin-left:-156px; margin-top:-156px; } header h2 { text-align:center; margin-top:50px; } /* 3D魔方 CSS start */ .container1 { -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-animation:change 6s linear infinite; -moz-animation:change 6s linear infinite; animation:change 6s linear infinite; width:312px; height:312px; } /* 动画 CSS start */ @-webkit-keyframes change { 0% { -webkit-transform:translateZ(-10em) rotateX(0deg) rotateY(0deg); } 33% { -webkit-transform:translateZ(-10em) rotateX(120deg) rotateY(240deg); } 66% { -webkit-transform:translateZ(-10em) rotateX(240deg) rotateY(480deg); } 100% { -webkit-transform:translateZ(-10em) rotateX(360deg) rotateY(720deg); } }@-moz-keyframes change { 0% { -moz-transform:translateZ(-10em) rotateX(0deg) rotateY(0deg); } 33% { -moz-transform:translateZ(-10em) rotateX(120deg) rotateY(240deg); } 66% { -moz-transform:translateZ(-10em) rotateX(240deg) rotateY(480deg); } 100% { -moz-transform:translateZ(-10em) rotateX(360deg) rotateY(720deg); } }@keyframes change { 0% { transform:translateZ(-10em) rotateX(0deg) rotateY(0deg); } 33% { transform:translateZ(-10em) rotateX(120deg) rotateY(240deg); } 66% { transform:translateZ(-10em) rotateX(240deg) rotateY(480deg); } 100% { transform:translateZ(-10em) rotateX(360deg) rotateY(720deg); } }/* 动画 CSS end */ /* 魔方正面 CSS start */ .front-big { position:absolute; width:312px; height:312px; border:10px solid yellow; -webkit-transform:translateZ(100px); -moz-transform:translateZ(100px); transform:translateZ(100px); } .front-small1 { position:absolute; width:100px; height:100px; left:0; top:0; background:#8A2BE2; border:1px solid #999; border-radius:10%; margin:1px 0 0 1px; font-size:16px; line-height:100px; } .front-small2 { position:absolute; width:100px; height:100px; left:104px; top:0; background:#8A2BE2; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .front-small3 { position:absolute; width:100px; height:100px; left:208px; top:0; background:#8A2BE2; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .front-small4 { position:absolute; width:100px; height:100px; left:0px; top:104px; background:#8A2BE2; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .front-small5 { position:absolute; width:100px; height:100px; left:104px; top:104px; background:#8A2BE2; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .front-small6 { position:absolute; width:100px; height:100px; left:208px; top:104px; background:#8A2BE2; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .front-small7 { position:absolute; width:100px; height:100px; left:0px; top:208px; background:#8A2BE2; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .front-small8 { position:absolute; width:100px; height:100px; left:104px; top:208px; background:#8A2BE2; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .front-small9 { position:absolute; width:100px; height:100px; left:208px; top:208px; background:#8A2BE2; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } /* 魔方正面 CSS end */ /* 魔方右面 CSS start */ .right-big { position:absolute; left:162px; width:312px; height:312px; -webkit-transform:translateZ(-64px) rotateY(90deg); -moz-transform:translateZ(-64px) rotateY(90deg); transform:translateZ(-64px) rotateY(90deg); border:10px solid yellow; } .right-small1 { position:absolute; width:100px; height:100px; left:0; top:0; background:blue; border:1px solid #999; border-radius:10%; margin:1px 0 0 1px; font-size:16px; line-height:100px; } .right-small2 { position:absolute; width:100px; height:100px; left:104px; top:0; background:blue; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .right-small3 { position:absolute; width:100px; height:100px; left:208px; top:0; background:blue; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .right-small4 { position:absolute; width:100px; height:100px; left:0px; top:104px; background:blue; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .right-small5 { position:absolute; width:100px; height:100px; left:104px; top:104px; background:blue; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .right-small6 { position:absolute; width:100px; height:100px; left:208px; top:104px; background:blue; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .right-small7 { position:absolute; width:100px; height:100px; left:0px; top:208px; background:blue; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .right-small8 { position:absolute; width:100px; height:100px; left:104px; top:208px; background:blue; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .right-small9 { position:absolute; width:100px; height:100px; left:208px; top:208px; background:blue; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } /* 魔方右面 CSS start */ /* 魔方左面 CSS start */ .left-big { position:absolute; right:146px; width:312px; height:312px; -webkit-transform:translateZ(-65px) rotateY(90deg); -moz-transform:translateZ(-65px) rotateY(90deg); transform:translateZ(-65px) rotateY(90deg); border:10px solid yellow; } .left-small1 { position:absolute; width:100px; height:100px; left:0; top:0; background:sandybrown; border:1px solid #999; border-radius:10%; margin:1px 0 0 1px; font-size:16px; line-height:100px; } .left-small2 { position:absolute; width:100px; height:100px; left:104px; top:0; background:sandybrown; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .left-small3 { position:absolute; width:100px; height:100px; left:208px; top:0; background:sandybrown; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .left-small4 { position:absolute; width:100px; height:100px; left:0px; top:104px; background:sandybrown; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .left-small5 { position:absolute; width:100px; height:100px; left:104px; top:104px; background:sandybrown; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .left-small6 { position:absolute; width:100px; height:100px; left:208px; top:104px; background:sandybrown; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .left-small7 { position:absolute; width:100px; height:100px; left:0px; top:208px; background:sandybrown; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .left-small8 { position:absolute; width:100px; height:100px; left:104px; top:208px; background:sandybrown; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .left-small9 { position:absolute; width:100px; height:100px; left:208px; top:208px; background:sandybrown; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } /* 魔方左面 CSS end */ /* 魔方顶部 CSS start */ .top-big { position:absolute; top:-162px; width:312px; height:312px; -webkit-transform:translateZ(-64px) rotateX(90deg); -moz-transform:translateZ(-64px) rotateX(90deg); transform:translateZ(-64px) rotateX(90deg); border:10px solid yellow; } .top-small1 { position:absolute; width:100px; height:100px; left:0; top:0; background:azure; border:1px solid #999; border-radius:10%; margin:1px 0 0 1px; font-size:16px; line-height:100px; } .top-small2 { position:absolute; width:100px; height:100px; left:104px; top:0; background:azure; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .top-small3 { position:absolute; width:100px; height:100px; left:208px; top:0; background:azure; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .top-small4 { position:absolute; width:100px; height:100px; left:0px; top:104px; background:azure; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .top-small5 { position:absolute; width:100px; height:100px; left:104px; top:104px; background:azure; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .top-small6 { position:absolute; width:100px; height:100px; left:208px; top:104px; background:azure; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .top-small7 { position:absolute; width:100px; height:100px; left:0px; top:208px; background:azure; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .top-small8 { position:absolute; width:100px; height:100px; left:104px; top:208px; background:azure; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .top-small9 { position:absolute; width:100px; height:100px; left:208px; top:208px; background:azure; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } /* 魔方顶部 CSS end */ /* 魔方底部 CSS start */ .up-big { position:absolute; top:162px; width:312px; height:312px; -webkit-transform:translateZ(-64px) rotateX(-90deg); -moz-transform:translateZ(-64px) rotateX(-90deg); transform:translateZ(-64px) rotateX(-90deg); border:10px solid yellow; } .up-small1 { position:absolute; width:100px; height:100px; left:0; top:0; background:#9c27b0; border:1px solid #999; border-radius:10%; margin:1px 0 0 1px; font-size:16px; line-height:100px; } .up-small2 { position:absolute; width:100px; height:100px; left:104px; top:0; background:#9c27b0; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .up-small3 { position:absolute; width:100px; height:100px; left:208px; top:0; background:#9c27b0; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .up-small4 { position:absolute; width:100px; height:100px; left:0px; top:104px; background:#9c27b0; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .up-small5 { position:absolute; width:100px; height:100px; left:104px; top:104px; background:#9c27b0; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .up-small6 { position:absolute; width:100px; height:100px; left:208px; top:104px; background:#9c27b0; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .up-small7 { position:absolute; width:100px; height:100px; left:0px; top:208px; background:#9c27b0; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .up-small8 { position:absolute; width:100px; height:100px; left:104px; top:208px; background:#9c27b0; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .up-small9 { position:absolute; width:100px; height:100px; left:208px; top:208px; background:#9c27b0; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } /* 魔方底部 CSS end */ /* 魔方反面 CSS start */ .reverse-big { position:absolute; width:312px; height:312px; -webkit-transform:translateZ(-232px); -moz-transform:translateZ(-232px); transform:translateZ(-232px); border:10px solid yellow; } .reverse-small1 { position:absolute; width:100px; height:100px; left:0; top:0; background:#04EC99; border:1px solid #999; border-radius:10%; margin:1px 0 0 1px; font-size:16px; line-height:100px; } .reverse-small2 { position:absolute; width:100px; height:100px; left:104px; top:0; background:#04EC99; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .reverse-small3 { position:absolute; width:100px; height:100px; left:208px; top:0; background:#04EC99; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .reverse-small4 { position:absolute; width:100px; height:100px; left:0px; top:104px; background:#04EC99; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .reverse-small5 { position:absolute; width:100px; height:100px; left:104px; top:104px; background:#04EC99; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .reverse-small6 { position:absolute; width:100px; height:100px; left:208px; top:104px; background:#04EC99; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .reverse-small7 { position:absolute; width:100px; height:100px; left:0px; top:208px; background:#04EC99; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .reverse-small8 { position:absolute; width:100px; height:100px; left:104px; top:208px; background:#04EC99; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } .reverse-small9 { position:absolute; width:100px; height:100px; left:208px; top:208px; background:#04EC99; border:1px solid #999; border-radius:10%; font-size:16px; line-height:100px; } /* 魔方反面 CSS end */ /* 3D魔方 CSS end */