一款纯CSS3 3D立方体旋转的动画,可以指定立方体的3D旋转方向:横向、纵向、纵横滚动、鼠标控制等,立方体每个面的颜色内容等也可以自由设置。
页面的head部分,设置好页面元素的样式(包含了多个transform),代码如下:
h1 { text-align: center; font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; }
h2 { font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; line-height:100px;}
.box{ width: 200px; height: 200px; padding: 100px; display: inline-block; border: 1px solid green; text-align: center;
perspective: 400px;
}
.box:hover #div{ transform: rotateY(-360deg);}
.div div{ width: 200px; height: 200px; position: absolute; top: 0px; left: 0px; opacity: 0.6;
border-radius: 50px; border: 1px solid white;
transform-origin: center center -100px;
}
.div1{ font: 50px/200px "微软雅黑"; color: white; position: relative;
transform-style:preserve-3d;
animation: mupiao 3s infinite linear running;
transform-origin: center 100px -100px;
}
.div2{ font: 50px/200px "微软雅黑"; color: white; position: relative;
transform-style:preserve-3d;
animation: mupiao2 3s infinite linear running;
transform-origin: center 100px -100px;
}
.div3{ font: 50px/200px "微软雅黑"; color: white; position: relative;
transform-style:preserve-3d;
transition: 6s all;
animation: mupiao3 6s infinite linear running;
transform-origin: center 100px -100px;
}
.div div:nth-of-type(1){
background: red;
transform: rotateY(0deg);
}
.div div:nth-of-type(2){
background: green;
transform: rotateY(90deg);
}
.div div:nth-of-type(3){
background: blue;
transform: rotateX(180deg);
}
.div div:nth-of-type(4){
background: purple;
transform: rotateY(270deg);
}
.div div:nth-of-type(5){
background: yellow;
transform: rotateX(90deg);
}
.div div:nth-of-type(6){
background: cyan;
transform: rotateX(270deg);
}
.div4{ font: 50px/200px "微软雅黑"; color: white; position: relative;
transform-style:preserve-3d;
animation: mupiao4 6s infinite linear running;
transform-origin: center 100px -100px;
}
.div4 div{transition: 1s all; opacity: 1; border-radius: 0px;}
.div4 div:nth-of-type(1){
background: red;
transform: rotateY(0deg);
}
.div4 div:nth-of-type(2){
background: green;
transform: rotateY(0deg);
}
.div4 div:nth-of-type(3){
background: blue;
transform: rotateY(0deg);
}
.div4 div:nth-of-type(4){
background: purple;
transform: rotateY(0deg);
}
.div4 div:nth-of-type(5){
background: yellow;
transform: rotateX(0deg);
}
.div4 div:nth-of-type(6){
background: cyan;
transform: rotateX(0deg);
}
.div4:hover div:nth-of-type(1){
opacity: 0.6;
border-radius: 100px;
transform: rotateY(0deg);
}
.div4:hover div:nth-of-type(2){
opacity: 0.6;
border-radius: 100px;
transform: rotateY(90deg);
}
.div4:hover div:nth-of-type(3){
opacity: 0.6;
border-radius: 100px;
transform: rotateY(180deg);
}
.div4:hover div:nth-of-type(4){
opacity: 0.6;
border-radius: 100px;
transform: rotateY(270deg);
}
.div4:hover div:nth-of-type(5){
opacity: 0.6;
border-radius: 100px;
transform: rotateX(90deg);
}
.div4:hover div:nth-of-type(6){
opacity: 0.6;
border-radius: 100px;
transform: rotateX(270deg);
}
@keyframes mupiao{
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(-360deg);
}
}
@keyframes mupiao2{
0%{
transform: rotateX(0deg);
}
100%{
transform: rotateX(360deg);
}
}
@keyframes mupiao3{
1%{
transform: rotateY(0deg);
}
50%{
transform: rotateY(-680deg);
}
51%{
transform: rotateX(0deg);
}
100%{
transform: rotateX(-680deg);
}
}
@keyframes mupiao4{
0%{
div:nth-of-type(1){
transform: rotateY(0deg);
}
div:nth-of-type(2){
transform: rotateY(0deg);
}
div:nth-of-type(3){
transform: rotateY(0deg);
}
div:nth-of-type(4){
transform: rotateY(0deg);
}
div:nth-of-type(5){
transform: rotateX(0deg);
}
div:nth-of-type(6){
transform: rotateX(0deg);
}
}
100%{
div:nth-of-type(1){
transform: rotateY(0deg);
}
div:nth-of-type(2){
transform: rotateY(90deg);
}
div:nth-of-type(3){
transform: rotateY(180deg);
}
div:nth-of-type(4){
transform: rotateY(270deg);
}
div:nth-of-type(5){
transform: rotateX(90deg);
}
div:nth-of-type(6){
transform: rotateX(270deg);
}
}
}
页面的body部分,用了div容器的嵌套结构,代码如下:
<h1>纯CSS3 3D立方体旋转动画</h1>
<hr />
<div class="box">
<div class="div div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h2>横向滚动</h2>
</div>
<div class="box">
<div class="div div2">
<div>1</div>
<div>5</div>
<div>3</div>
<div>6</div>
<div>4</div>
<div>2</div>
</div>
<h2>纵向滚动</h2>
</div>
<div class="box">
<div class="div div3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h2>纵横滚动</h2>
</div>
<div class="box">
<div class="div div4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h2>鼠标指我</h2>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791