CSS3 前端开发实现魔方

前端开发者|前端开发 css3 魔方|html5 css3 前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>魔方</title>
<style>
*{
margin:0;
padding:0;
}
.wrapper{
width:1000px;
height:600px;
/*background:#eee;*/
margin:20pxauto;
perspective:1000px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
text-align:center;
transition:alllinear.7s;
position:relative;
}
.box{
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
position:absolute;
width:200px;
height:200px;
top:200px;
left:400px;
transition:alllinear.7s;
animation: scaleWidth 10slinearinfinite;
}
@keyframesscaleWidth{
0% {
transform-origin:center;
transform:rotateZ(0deg)rotateX(0deg)rotateY(0deg);
}
100% {
transform-origin:center;
transform:rotateZ(-360deg)rotateX(-360deg)rotateY(-360deg);
}
}
.boxdiv{
width:198px;
height:198px;
text-align:center;
line-height:200px;
font-size:50px;
position:absolute;
/*opacity: .2;*/
animation: cwidth linear10s;
overflow:hidden;
}
@keyframescwidth{
0% {
width:0;
height:0;
}
100% {
width:198px;
height:198px;
}
}
.boxdivspan{
display:block;
width:62px;
height:62px;
border:1pxsolid#000;
margin:1px;
float:left;
}
.wrapper.boxdiv:nth-of-type(1){
left:0;
top:-200px;
transform-origin:bottom;
transform:rotateX(90deg);
}
.wrapper.boxdiv:nth-of-type(1)span{
background-color:red;
}
.wrapper.boxdiv:nth-of-type(2){
left:0;
top:0px;
transform:translateZ(0px);
}
.wrapper.boxdiv:nth-of-type(2)span{
background-color:yellow;
}
.wrapper.boxdiv:nth-of-type(3){
left:0;
top:200px;
transform-origin:top;
transform:rotateX(-90deg);
}
.wrapper.boxdiv:nth-of-type(3)span{
background-color:green;
}
.wrapper.boxdiv:nth-of-type(4){
left:-200px;
top:0px;
transform-origin:right;
transform:rotateY(-90deg);
}
.wrapper.boxdiv:nth-of-type(4)span{
background-color:deeppink;
}
.wrapper.boxdiv:nth-of-type(5){
left:200px;
top:0px;
transform-origin:left;
transform:rotateY(90deg);
}
.wrapper.boxdiv:nth-of-type(5)span{
background-color:cyan;
}
.wrapper.boxdiv:nth-of-type(6){
left:0px;
top:0px;
transform:translateZ(-200px)
}
.wrapper.boxdiv:nth-of-type(6)span{
background-color:purple;
}
</style>
</head>
<body>
<divclass=”wrapper”>
<divclass=”box”>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
css3 前端开发插件|web前端开发html5 css3培训|前端开发css文件模板下载
» 本文来自:前端开发者 » 《CSS3 前端开发实现魔方》
» 本文链接地址:https://www.rokub.com/3585.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!