立方体动画制作------方法二

最新推荐文章于 2021-05-30 19:40:26 发布

置顶栈长

最新推荐文章于 2021-05-30 19:40:26 发布

阅读量409

点赞数

分类专栏： CSS3，立方体动画文章标签：动画 html 3d 正方体 CSS3

本文链接：https://blog.csdn.net/wdzhszyq/article/details/69148325

版权

动画同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS3，立方体

1 篇文章 0 订阅

订阅专栏

方法二：

步骤一：

一个大盒子包着6个小盒子；

步骤二：

大盒子的宽高和小盒子的一样；

步骤三：

子绝父相，让6个小盒子脱离文档流，叠在一起；

步骤四：

给6个小盒子设置不同背景颜色；

步骤五：

先做上下两个面，分别沿Y轴的上下各自平移宽度的一半，再继续围绕X轴各自旋转90deg。

步骤六：

先做左右两个面，分别沿X轴的左右各自平移宽度的一半，再继续围绕Y轴各自旋转90deg。

步骤七：

先做前后两个面，分别沿Z轴的前后各自平移宽度的一半。

步骤八：

给父元素加transform-style: preserve-3d;转成3d.

步骤九：

让父元素旋转，查看效果， transform:rotateY(30deg) rotateX(30deg);

HTML和CSS样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>透明3D立体正方体</title>
<style type="text/css">
body{
background: #000;
}

.box{
width: 200px;
height: 200px;
position: relative;
margin:200px auto;
transform-style: preserve-3d;
transform:rotateY(0deg) rotateX(30deg);

}
p{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
opacity: 0.5;
position:absolute;
left: 0px;
top: 0px;

}
.one{
background: red;
-webkit-transform: translateX(100px) rotateY(90deg);
-moz-transform: translateX(100px) rotateY(90deg);
-ms-transform: translateX(100px) rotateY(90deg);
-o-transform: translateX(100px) rotateY(90deg);
transform: translateX(100px) rotateY(90deg);
}
.two{
background: blue;
-webkit-transform: translateX(-100px) rotateY(90deg);
-moz-transform: translateX(-100px) rotateY(90deg);
-ms-transform: translateX(-100px) rotateY(90deg);
-o-transform: translateX(-100px) rotateY(90deg);
transform: translateX(-100px) rotateY(90deg);
}
.three{
background: green;
-webkit-transform: translateY(100px) rotateX(90deg);
-moz-transform: translateY(100px) rotateX(90deg);
-ms-transform: translateY(100px) rotateX(90deg);
-o-transform: translateY(100px) rotateX(90deg);
transform: translateY(100px) rotateX(90deg);
}
.four{
background: yellow;
-webkit-transform: translateY(-100px) rotateX(90deg);
-moz-transform: translateY(-100px) rotateX(90deg);
-ms-transform: translateY(-100px) rotateX(90deg);
-o-transform: translateY(-100px) rotateX(90deg);
transform: translateY(-100px) rotateX(90deg);
}
.five{
background: pink;
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px);
}
.sex{
background: orange;
-webkit-transform: translateZ(-100px);
-moz-transform: translateZ(-100px);
-ms-transform: translateZ(-100px);
-o-transform: translateZ(-100px);
transform: translateZ(-100px);
}
</style>
</head>
<body>
<div class="box">
<p class="one">1</p>
<p class="two">2</p>
<p class="three">3</p>
<p class="four">4</p>
<p class="five">5</p>
<p class="sex">6</p>
</div>
</body>
</html>