CSS3实现立方体旋转

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>立方体旋转</title>

     <style>

         .box{

             width: 250px;

             height: 250px;

             border: 1px dashed red;

             margin:100px auto;

             position: relative;

             transform-style: preserve-3d;

             border-radius: 50%;

             /*transform: rotateX(30deg) rotateY(-30deg);*/

             animation: gun 8s linear infinite;

         }

         .box>div{

             width: 100%;

             height: 100%;

             position: absolute;

             text-align: center;

             line-height: 250px;

             font-size: 60px;

             color: green;

         }

         .left{

             background-color: rgba(255,0,0,0.3);

             /*变换中心*/

             transform-origin: left;

             /*变换*/

             transform:rotateY(90deg) translateX(-125px);

         }

         .right{

             background-color: rgba(0,0,255,0.3);

             transform-origin: right;

             transform: rotateY(90deg) translateX(125px);

         }

         .forward{

             background-color: rgba(0,255,255,0.3);

             transform: translateZ(125px);

         }

         .back{

             background-color: rgba(255,255,0,0.3);

             transform: translateZ(-125px);

         }

         .up{

             background-color: rgba(99,66,33,0.3);

             transform: rotateX(90deg) translateZ(125px);

         }

         .down{

             background-color: rgba(255,0,255,0.3);

             transform: rotateX(-90deg) translateZ(125px);

         }

         @keyframes gun {

             0%{

                 transform: rotateX(0deg) rotateY(0deg);

             }

             100%{

                 transform: rotateX(360deg) rotateY(360deg);

             }

         }

     </style>

 </head>

 <body>

     <div class="box">

         <div class="up">上</div>

         <div class="down">下</div>

         <div class="left">左</div>

         <div class="right">右</div>

         <div class="forward">前</div>

         <div class="back">后</div>

     </div>

 </body>

 </html>

运行效果：
 

第102天：CSS3实现立方体旋转的更多相关文章

  1. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  2. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

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

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

  4. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  5. 超绚丽CSS3多色彩发光立方体旋转动画

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...

  6. CSS3 3D图片立方体旋转

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  7. 纯CSS3实现一个旋转的3D立方体盒子

    简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...

  8. css3-实现3D立方体旋转

    核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...

  9. 制作3D图片立方体旋转特效

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...

随机推荐

  1. 20155337 2016-2017-2《Java程序设计》课程总结

    20155337 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 <我的第一篇随笔> <做中学> <Java程序设计>第 ...

  2. P,NP,NPC的通俗解释

    这或许是众多OIer最大的误区之一.    你会经常看到网上出现“这怎么做,这不是NP问题吗”.“这个只有搜了,这已经被证明是NP问题 了”之类的话.你要知道,大多数人此时所说的NP问题其实都是指的N ...

  3. SSM框架及例子（转）

    SSM 手把手教你整合最优雅SSM框架:SpringMVC + Spring + MyBatis 博客地址:http://blog.csdn.net/qq598535550/article/detai ...

  4. dat类型文件入库后校验数据有问题

    一.问题: dat或者txt文件入库后,字段进行正则校验报出不应该出现的错误 二.排查: (1)根据报出的错误,把错误日志中的字串单独提取出来,进行正则校验发现没有问题 (2)可以想到,要不是程序问题 ...

  5. gitlab在push代码的时候报错

    一.问题报错 gitlab在执行git pull origin master,拉取代码的时候报如下错误. $ git pull origin master remote: Counting objec ...

  6. OpenStack入门篇（五）之KVM性能优化及IO缓存介绍

    1.KVM的性能优化,介绍CPU,内存,IO性能优化 KVM CPU-->qemu进行模拟ring 3-->用户应用 (用户态,用户空间)ring 0-->操作系统 (内核态,内核空 ...

  7. Airflow使用入门指南

    Airflow能做什么 关注公众号, 查看更多 http://mp.weixin.qq.com/s/xPjXMc_6ssHt16J07BC7jA Airflow是一个工作流分配管理系统,通过有向非循环 ...

  8. Python爬虫与反爬虫（7）

    [Python基础知识]Python爬虫与反爬虫(7) 很久没有补爬虫了,相信在白蚁二周年庆的活动大厅比赛中遇到了关于反爬虫的问题吧 这节我会做个基本分享. 从功能上来讲,爬虫一般分为数据采集,处理, ...

  9. mui搜索框 搜索点击事件

    <div class="mui-input-row mui-search"> <input type="search" class=" ...

  10. ConcurrentHashMap(JDK1.8)为什么要放弃Segment

    今天看到一篇博客:jdk1.8的HashMap和ConcurrentHashMap,我想起了前段时间面试的一个问题:ConcurrentHashMap(JDK1.8)为什么要使用synchronize ...