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

* html

  1. <div id="wrap">
  2. <div class="wrap">
  3. <div class="red">
  4. </div>
  5. <div class="blue">
  6. </div>
  7. <div class="green">
  8. </div>
  9. <div class="orange">
  10. </div>
  11. <div class="white">
  12. </div>
  13. <div class="yellow">
  14. </div>
  15. </div>
  16. </div>

* css

  1. @keyframes box {
  2. 0% {
  3. transform: rotatex(0deg) rotateY(0deg) rotateZ(0deg);
  4. }
  5. 100% {
  6. transform: rotatex(360deg) rotateY(360deg) rotateZ(360deg);
  7. }
  8. }
  9. #wrap {
  10. width: 400px;
  11. height: 400px;
  12. padding: 100px;
  13. margin: 150px auto;
  14. perspective: 1200px;
  15. }
  16. .wrap {
  17. width: 400px;
  18. height: 400px;
  19. transition: 5s;
  20. transform-style: preserve-3d;
  21. position: relative;
  22. animation: box 10s linear infinite;
  23. transform-origin: center center -200px;
  24. ;
  25. }
  26. .wrap div:nth-of-type(1) {
  27. position: absolute;
  28. background: #fe0000;
  29. background-image: url('http://img1.gtimg.com/tj/pics/hv1/117/208/2153/140051982.jpg');
  30. right: -400px;
  31. top: 0;
  32. transform: rotateY(90deg);
  33. transform-origin: left;
  34. }
  35. .wrap div:nth-of-type(2) {
  36. position: absolute;
  37. background: #0000fe;
  38. background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=841408372,3004217725&fm=11&gp=0.jpg');
  39. bottom: -400px;
  40. left: 0;
  41. transform: rotatex(-90deg);
  42. transform-origin: top;
  43. }
  44. .wrap div:nth-of-type(3) {
  45. position: absolute;
  46. background: #00ff01;
  47. background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2388632836,3966607624&fm=26&gp=0.jpg');
  48. bottom: 0px;
  49. left: 0;
  50. backface-visibility: hidden;
  51. }
  52. .wrap div:nth-of-type(4) {
  53. position: absolute;
  54. background: #ff610a;
  55. background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=192610795,467565159&fm=26&gp=0.jpg');
  56. bottom: 0px;
  57. left: -400px;
  58. transform: rotateY(-90deg);
  59. transform-origin: right;
  60. }
  61. .wrap div:nth-of-type(5) {
  62. position: absolute;
  63. background: #fff;
  64. background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2936477803,4198185787&fm=15&gp=0.jpg");
  65. top: -400px;
  66. left: 0;
  67. transform: rotatex(90deg);
  68. transform-origin: bottom;
  69. }
  70. .wrap div:nth-of-type(6) {
  71. position: absolute;
  72. background: #ffff00;
  73. background-image: url('http://img0.pclady.com.cn/pclady/1611/02/1612285_jyz.jpg');
  74. bottom: 0px;
  75. left: 0;
  76. transform: translateZ(-400px);
  77. }
  78. .wrap div {
  79. border-radius: 4px;
  80. overflow: hidden;
  81. width: 400px;
  82. height: 400px;
  83. }

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. linux系统基础优化及高级操作命令

    Linux基础系统优化 引言没有,只有一张图. Linux的网络功能相当强悍,一时之间我们无法了解所有的网络命令,在配置服务器基础环境时,先了解下网络参数设定命令. ifconfig 查询.设置网卡和 ...

  2. 【Spark机器学习速成宝典】模型篇07梯度提升树【Gradient-Boosted Trees】(Python版)

    目录 梯度提升树原理 梯度提升树代码(Spark Python) 梯度提升树原理 待续... 返回目录 梯度提升树代码(Spark Python) 代码里数据:https://pan.baidu.co ...

  3. Netem参数说明

    Netem参数说明 本文主要内容来自Linux基金会Wiki网站Netem文档,点击这里访问原文 netem通过模拟广域网的特性为测试协议提供网络仿真功能.当前版本模拟可变延迟,丢失,重复和重新排序. ...

  4. gradle 离线模式offline 用法

    1. 离线模式 offline所谓离线模式offline,就是gradle在解析依赖的时候采用本地的依赖库(如 GRADLE_USER_HOME指定的路径),而不是依据项目build.gradle文件 ...

  5. VSCode添加 console.log 快捷键

    file - preferences - keyboard shortcuts - keybindings.json:   添加:   {   "key": "ctrl+ ...

  6. SQL Server 批量创建作业(备份主分区)

    一. 需求背景 在我的数据库实例中,有很多类似下图所示的数据库,这些数据库的名称是有规律的,每个数据库包含的表都是相同的,其中2个表是类似流水记录的表,表的数据量会比较大,占用的空间有几十G到上百G不 ...

  7. harbor无法上传镜像解决

    报错:[root@bogon harbor]# docker login 192.168.43.65:5000Username (admin): Password: Login Succeeded [ ...

  8. ABAP的smartform赋值

    添加文本后, 在输出选项中指定行/列

  9. appium+python+安卓模拟器环境搭建和启动app实例

    本文主要介绍在windows环境下搭建app自动化测试环境,具体步骤如下: 1.下载安卓sdk,网上很多资源 2.下载并安装安卓模拟器,官网上有 删除bin文件下的adb.exe和nox_adb.ex ...

  10. sublime3配置php开发环境

    Sublime3 3143 1.用包管理器安装SublimeLinter ctrl+shift+p Package Control: install package SublimeLinter 注意: ...