首先要给 3D 的元素准备一个 "舞台", 因为页面本身是平面的, 并不能展示出 3D 的效果.
通过设置透视距离, 就相当于把这个区域变成了一个能表现出近大远小的 "3D 舞台", 在其内部就可以去做 3D 效果了.
- <div class="container">
- </div>
- .container {
- height: 500px;
- background: #eee;
- perspective: 500px; /* 设置透视距离 */
- }
舞台搭好, 演员上场, 在 container 中加入一个盒子用来做正方体. 设置宽高并定位到舞台中央, 添加一个边框方便看到位置, 设置 transform-style 属性, 他的作用是允许 box 这个盒子的子元素进行 3d 变换
- <div class="container">
- <div class="box">
- </div>
- </div>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
- .box {
- width: 200px;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- border: 1px solid #000;
- transform-style: preserve-3d;
- }
正方体有六面, 在 box 中添加六个 div 用来做他的六个面.
将六个面两两一组分为 a, b , c 三组方便描述: a1 为离我们最近的'前面',a2 就是与 a1 相对离我们最远的'背面',b1 为左侧的面, b2 为右侧面, c1 为顶部, c2 为底部 (参考文章顶部效果图)
- <div class="container">
- <div class="box">
- <div class="a1">a1</div> <!-- 前 -->
- <div class="a2">a2</div> <!-- 后 -->
- <div class="b1">b1</div> <!-- 左 -->
- <div class="b2">b2</div> <!-- 右 -->
- <div class="c1">c1</div> <!-- 上 -->
- <div class="c2">c2</div> <!-- 下 -->
- </div>
- </div>
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
将六个面都定位到 box 的正中心, 设置宽高, 并把文本居中
- .box div {
- width: 200px;
- height: 200px;
- position: absolute;
- text-align: center;
- line-height: 200px;
- font-size: 30px;
- }
此时的六个面相当于是重叠在 x 轴为 0,y 轴为 0,z 轴也为 0 的地方 (x 和 y 轴在屏幕上分别表现为左右和上下, z 轴表示视觉上与我们的距离远近)
上面我们将每个面的宽高都设置为 200px, 也就是相对的两个面之间的距离应该是 200px.
先来设置 a1 面, 沿 z 轴向前移动 100px, 也就是向我们靠近 100px, 同时给每个面都加上一个透明的颜色方便看效果
- .a1 {
- background: rgba(0, 0, 255, 0.5);
- transform: translateZ(100px);
- }
然后将 a2 面沿 z 轴向后移动 100px, 也就是相对我们变远 100px
- .a2 {
- background: rgba(0, 0, 255, 0.5);
- transform: translateZ(-100px);
- }
这样本来重叠的两个面, 一个靠近 100px, 一个变远 100px, 两个面之间刚好 200px 距离
另外还应该将 a2 沿 y 轴旋转 180 度, 也就是翻个面, 将有字的这一面对着外面
- .a2 {
- background: rgba(0, 0, 255, 0.5);
- transform: translateZ(-100px) rotateY(180deg);
- }
此时已经看出 3d 效果生效了, 因为近大远小的原理, 虽然都是 200px 的长宽, 离我们更近的 a1 面比 box 的边框要大出一圈, 而较远的 a2 则要小一圈
再来设置 b1,b1 是左侧的面, 沿 x 轴左移 100px, 然后沿 y 轴旋转 - 90 度, 将写字的正面朝向左侧
- .b1 {
- background: rgba(0, 255, 0, 0.5);
- transform: translateX(-100px) rotateY(-90deg);
- }
相对的, b2 就是右移 100px, 旋转正 90 度
- .b2 {
- background: rgba(0, 255, 0, 0.5);
- transform: translateX(100px) rotateY(90deg);
- }
继续设置 c1,c1 是顶部的面, 所以沿 y 轴上移 100px, 然后沿 x 轴旋转 90 度
- .c1 {
- background: rgba(255, 0, 0, 0.5);
- transform: translateY(-100px) rotateX(90deg);
- }
相对的, c2 为底部, 沿 y 轴下移 100px, 然后沿 x 轴旋转 - 90 度
- .c2 {
- background: rgba(255, 0, 0, 0.5);
- transform: translateY(100px) rotateX(-90deg);
- }
此时这个 3D 的立方体已经完成了, 为了能看出更明显的立体效果, 再加一些变化
回到. box 的样式, 将边框去除, 然后增加一点角度的倾斜
- .box {
- width: 200px;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg);
- /* border: 1px solid #000; */
- transform-style: preserve-3d;
- }
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
最后添加一个旋转的动画
- .box {
- width: 200px;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg);
- /* border: 1px solid #000; */
- transform-style: preserve-3d;
- animation: run 5s linear;
- animation-iteration-count: infinite;
- }
- @keyframes run {
- 0% {
- transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg) rotateY(0);
- }
- 50% {
- transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg) rotateY(180deg);
- }
- 100% {
- transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg) rotateY(360deg);
- }
- }
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/3654df00be40