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. PHP中的事件处理

    看下面的事件类 class Event { protected static $listens = array(); /** * [listen 注册监听事件] * @param [string] $ ...

  2. 《Node.js 包教不包会》

    <Node.js 包教不包会> 为何写作此课程 在 CNode(https://cnodejs.org/) 混了那么久,解答了不少 Node.js 初学者们的问题.回头想想,那些问题所需要 ...

  3. jenkins统计单元测试的覆盖率

    前提:单元测试和被测代码在一个仓库 maven的pom配置 依赖增加 <dependency> <groupId>org.jacoco</groupId> < ...

  4. 了解ASP.NET Core 依赖注入，看这篇就够了

    DI在.NET Core里面被提到了一个非常重要的位置, 这篇文章主要再给大家普及一下关于依赖注入的概念,身边有工作六七年的同事还个东西搞不清楚.另外再介绍一下.NET  Core的DI实现以及对实例 ...

  5. 我们一起学习WCF 第五篇数据协定和消息协定

    A:数据协定(“数据协定”是在服务与客户端之间达成的正式协议,用于以抽象方式描述要交换的数据. 也就是说,为了进行通信,客户端和服务不必共享相同的类型,而只需共享相同的数据协定. 数据协定为每个参数或 ...

  6. 视觉SLAM中的深度估计问题

    一.研究背景 视觉SLAM需要获取世界坐标系中点的深度. 世界坐标系到像素坐标系的转换为(深度即Z): 深度的获取一共分两种方式: a)主动式 RGB-D相机按照原理又分为结构光测距.ToF相机 To ...

  7. 接口自动化·分享·第二篇·你必须了解的HttpRequest和HttpResponse

    完成一个接口调用其实就是完成了一次http请求,所以你必须要清楚一个http请求的组成. 一次完整的请求包含:请求+响应. 一.HttpRequest请求对象 要调用一个接口,首先要准备的是一个请求对 ...

  8. Codeforces Round #500 (Div. 2) D - Chemical table

    首先我们如果满足三缺一,那么必有同行和同列的点 如果两行有同列的数,我们可以设想,他们最后会全部填充成为两者啥都有的情况 显然这个是个并查集 现在我们有了很多集合,每个集合自己可以进行三缺一操作,但是 ...

  9. NO.04--我的使用心得之使用vue绑定class名

    今天聊一聊这个话题,其实方式有很多种,我今天介绍几种我使用到的,各位看官耐心看: 一.用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说,直接写就可以了 <te ...

  10. centos7挂载Windows共享文件夹（学习笔记）

    centos7挂载windows共享文件夹 练习环境:centos7是安装在台式机的虚拟机,Windows共享文件夹是公司服务器的共享文件夹(已设置好的共享) 步骤 1. 设置挂载点:mkdir /m ...