原博文 * https://www.cnblogs.com/shihao905/p/6208324.html

* html

<div id="wrap">
<div class="wrap">
<div class="red">
</div>
<div class="blue">
</div>
<div class="green">
</div>
<div class="orange">
</div>
<div class="white">
</div>
<div class="yellow">
</div>
</div>
</div>

* css

    @keyframes box {
0% {
transform: rotatex(0deg) rotateY(0deg) rotateZ(0deg);
} 100% {
transform: rotatex(360deg) rotateY(360deg) rotateZ(360deg);
}
} #wrap {
width: 400px;
height: 400px;
padding: 100px;
margin: 150px auto;
perspective: 1200px;
} .wrap {
width: 400px;
height: 400px;
transition: 5s;
transform-style: preserve-3d;
position: relative;
animation: box 10s linear infinite;
transform-origin: center center -200px;
;
} .wrap div:nth-of-type(1) {
position: absolute;
background: #fe0000;
background-image: url('http://img1.gtimg.com/tj/pics/hv1/117/208/2153/140051982.jpg');
right: -400px;
top: 0;
transform: rotateY(90deg);
transform-origin: left;
} .wrap div:nth-of-type(2) {
position: absolute;
background: #0000fe;
background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=841408372,3004217725&fm=11&gp=0.jpg');
bottom: -400px;
left: 0;
transform: rotatex(-90deg);
transform-origin: top;
} .wrap div:nth-of-type(3) {
position: absolute;
background: #00ff01;
background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2388632836,3966607624&fm=26&gp=0.jpg');
bottom: 0px;
left: 0;
backface-visibility: hidden;
} .wrap div:nth-of-type(4) {
position: absolute;
background: #ff610a;
background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=192610795,467565159&fm=26&gp=0.jpg');
bottom: 0px;
left: -400px;
transform: rotateY(-90deg);
transform-origin: right;
} .wrap div:nth-of-type(5) {
position: absolute;
background: #fff;
background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2936477803,4198185787&fm=15&gp=0.jpg");
top: -400px;
left: 0;
transform: rotatex(90deg);
transform-origin: bottom;
} .wrap div:nth-of-type(6) {
position: absolute;
background: #ffff00;
background-image: url('http://img0.pclady.com.cn/pclady/1611/02/1612285_jyz.jpg');
bottom: 0px;
left: 0;
transform: translateZ(-400px);
} .wrap div {
border-radius: 4px;
overflow: hidden;
width: 400px;
height: 400px;
}

CSS3 @keyframes 实现匀速旋转魔方(搬运工)的更多相关文章

  1. CSS动画之旋转魔方轮播

    很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...

  2. 纯CSS做3D旋转魔方

    昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方  效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试  做成自己特有的魔方 <!DOCTYPE h ...

  3. 用css3实现摩天轮旋转的动画效果

    用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...

  4. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  5. CSS3 @keyframes 规则

    今天来给大家分享一下CSS3 @keyframes 规则! 在你了解CSS3 @keyframes 规则时我先来给大家说说什么是css3中的动画 动画是使元素从一种样式逐渐变化为另一种样式的效果. 您 ...

  6. 纯css3实现的圆形旋转分享按钮

    之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...

  7. 一款基于css3鼠标经过圆形旋转特效

    今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  8. CSS3实现3D木块旋转动画

    CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...

  9. Android中让View匀速旋转

    项目需求,需要一个实现一个单帧的旋转动画,来提示当前进度,类似与圆圈型的progressbar. 首先定义anim文件: [html] view plaincopyprint? 1.     < ...

随机推荐

  1. 20191017-2 alpha week 2/2 Scrum立会报告+燃尽图 01

    本次作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9798 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 杨萍队名: ...

  2. 云服务器搭建anaconda pytorch torchvision

    (因为在普通用户上安装有些权限问题安装出错,所以我在root用户下相对容易安装,但是anaconda官网说可以直接在普通用户下安装,不过,在root下安装,其他用户也是能用的. 访问Anaconda官 ...

  3. defineProperty和defineProperties介绍

    v-model 实现的原理 angular 是 mvc 的实现原理,ng-model 是靠脏值检测实现的 脏值检测:for 循环一个个对比 vue 靠的是数据劫持 和 发布者,订阅者模式 数据劫持:O ...

  4. Linux环境快速搭建elasticsearch6.5.4集群和Head插件

    https://blog.csdn.net/boling_cavalry/article/details/86358716

  5. Mysql 基础操作命令

    1,查看mysql的建表语句 show create table tableName; #tableName 库中已存在的表名

  6. PHP CI框架数据传递渲染

    实例: //控制器 class Index extends CI_Controller { //因为类名是特殊字,所以为了运行正常添加构造函数 function __construct(){ pare ...

  7. 2019.7.9 校内交流测试(T 3 待更完)

    T1_挖地雷(提交文件bomp.cpp) 递推大法好啊 题解 递推高级题目 这个题就是按照扫雷的思路解决 相邻的三个格子上的雷数和加起来正好等于中间格子上的数 所以当我们确定了第一个格子周围的雷,其余 ...

  8. C# 给某个方法设定执行超时时间-2

    var response = RunTaskWithTimeout<ReturnType>( (Func<ReturnType>)); /// <summary> ...

  9. PS 之图片中抠出大树

    工具:Photoshop CC2017 原图:(目的是将大树从图片中抠出) 操作: 1.打开要抠图的图片,然后执行:[图层]---->[新建调整图层]---->[反相]---->[在 ...

  10. Jmeter+Ant+Jenkins接口自动化持续集成环境搭建(Linux)

    一.安装说明 系统环境:CentOS release 6.4 JDK版本:jdk1.8.0_181 Jmeter版本:apache-jmeter-3.0 Ant版本:apache-ant-1.9.13 ...