提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

实现效果

提示：以下是本篇文章正文内容，下面案例可供参考

一、注意事项

1 元素旋转跟圆点 transform-origin: 50% 100%;有关

2 transfrom 旋转跟属性的值得顺序有关

3要借助辅助盒子实现后和上一起旋转

二、使用步骤

1.html

代码如下（示例）：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>正方体</title><style type="text/css"></style><link rel="stylesheet" type="text/css" href="../css/cfzft.css"/></head><body><div class="bigbox"><!--辅助盒子--><div class="fzbox"><div class="top">上</div><div class="behind">后</div></div><div class="bottom">下</div><div class="left">左</div><div class="right">右</div><div class="front">前</div></div></body>
</html>

2.css

代码如下（示例）：

.bigbox {width: 300px;height: 300px;/*border: 1px solid black;*/margin: 200px auto;/*perspective: 1800px;*/transform-style: preserve-3d;perspective-origin: 50% 50%;transform: rotateX(-45deg) rotateY(45deg);/*animation: box-run 3s linear alternate infinite;*/
}@keyframes box-run {0% {transform: rotateX(45deg) rotateY(-45deg);}100% {transform: rotateX(405deg) rotateY(-405deg);}
}.bigbox div {position: absolute;top: 0;left: 0;width: 300px;height: 300px;opacity: 1;text-align: center;line-height: 300px;font-size: 25px
}
.fzbox{transform-style: preserve-3d;transform-origin: 50% 100%;border: 1px black solid;transform: translateZ(-150px) ;animation: fzbox-run 1s linear alternate;animation-fill-mode: forwards;animation-delay: 3s;}
@keyframes fzbox-run{0%{transform: translateZ(-150px) ;}100%{transform: translateZ(-150px) rotateX(90deg);}
}.top {background: salmon;transform-origin: 50% 0%;transform: rotateX(90deg) ;animation: top-run 1s linear alternate;animation-fill-mode: forwards;animation-delay: 4s;}
@keyframes top-run{0%{transform: rotateX(90deg);}100%{transform: rotateX(90deg) rotateX(90deg);}
}
.behind {background: aquamarine;animation: behind-run 1s linear alternate;animation-fill-mode: forwards;
}
.bottom {background: silver;transform: rotateX(-90deg) translateZ(150px);
}.left {background: saddlebrown;transform-origin: 50% 100%;transform: rotateY(-90deg) translateZ(150px) ;animation: left-run 1s linear alternate;animation-fill-mode: forwards;animation-delay: 1s;
}
@keyframes left-run{0%{transform: rotateY(-90deg) translateZ(150px);}100%{transform:rotateY(-90deg) translateZ(150px) rotateX(-90deg) ;}
}.right {background: olive;transform-origin: 50% 100%;transform: rotateY(-90deg) translateZ(-150px)  ;animation: right-run 1s linear 1;animation-fill-mode: forwards;animation-delay: 2s;}
@keyframes right-run{0%{transform: rotateY(-90deg) translateZ(-150px);}100%{transform:rotateY(-90deg) translateZ(-150px) rotateX(90deg) ;}
}.front {transform-origin: 50% 100%;background: #ADFF2F;transform: translateZ(150px) ;animation: front-run 1s 1 linear ;animation-fill-mode: forwards;}
@keyframes front-run{0%{transform: translateZ(150px);}100%{transform:translateZ(150px) rotateX(-90deg) ;}
}

总结

3D效果应该借助舞台实现旋转舞台改变原点（改变y轴数值，改变的是x轴的位置）借助辅助盒子实现多个面一起旋转

css3拆解正方体动画效果相关推荐

css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
25个CSS3 渐变和动画效果教程
2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...
html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...
CSS3 高斯模糊与动画效果
CSS3 高斯模糊与动画效果 1. 概述 2. 高斯模糊说明与语法 2.1 高斯模糊说明 2.2 blur 语法 3. 动画效果 3.1 @keyframes 语法 3.2 animation 语法 ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
css 3d闪烁动画,CSS3实现闪烁动画效果的方法
本文实例讲述了CSS3实现闪烁动画效果的方法.分享给大家供大家参考.具体方法如下: 给class属性名为className的元素添加闪烁动画效果复制代码代码如下: .className{ -webk ...
HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换案例 ...
css3 动画图片滚动条,CSS3实现滚动条动画效果代码分享
一团网资讯一团资讯 > css3 > CSS3实现滚动条动画效果代码分享 CSS3实现滚动条动画效果代码分享 2018-05-01 08:57:16 发布者:来源网络先给大家一 ...

css3拆解正方体动画效果