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. 20155229 2016-2007-2 《Java程序设计》第一周学习总结

    20155229 2016-2007-2 <Java程序设计>第一周学习总结 教材学习内容总结 1~18章的提问: 第一章:怎样撰写Java才不会沦于死背API文件.使用"复制. ...

  2. 自己在UWP程序上调用usb转串口的路程

    之前一直是在普通的framework环境下写串口,使用的类为 SerialPort 这个类大家可能比较熟悉.但是在UWP的开发里,使用的是 SerialDevice 这个类,是不一样的. 1. 清单文 ...

  3. OpenCV中对Mat里面depth,dims,channels,step,data,elemSize和数据地址计算的理解

    原文:OpenCV中对Mat里面depth,dims,channels,step,data,elemSize和数据地址计算的理解 Title : cv::Mat depth/dims/channels ...

  4. SaltStack入门篇（四）之深入理解SaltStack远程执行

    1.目标 2.执行模块 3.返回 salt ‘*’ cmd.run ‘uptime’ 命令 目标 执行模块 执行模块参数 1.SlatStack远程执行–目标 执行目标:https://docs.sa ...

  5. STM32L431仿真卡在HAL_InitTick(TICK_INT_PRIORITY);

    1. 使用IAR 8.20版本,STM32L431RBT芯片,JLINK V9仿真器,实际仿真测试的时候卡在如下的函数 /* Use SysTick as time base source and c ...

  6. jaron插件的用法

    一.dict字典插件的基本用法: <%@ taglib prefix="dict" uri="http://www.evan.jaron.com/tags/dict ...

  7. 利用 Python 分析微信好友性别和位置

    今天用到一个非常有意思的库——itchat,它已经完成了 wechat 的个人账号API接口,使爬取个人微信信息更加方便.  下载 爬取微信好友信息 这样就将你所有微信好友的信息都返回了,我们并不需要 ...

  8. javaweb(三十四)——使用JDBC处理MySQL大数据

    一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 在实际开发中,有时 ...

  9. web存储机制（localStorage和sessionStorage）

    web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别,非同源文档间无法共享) 1.sessionStorage 数据放在服务器上(IE不支持) 严格用于 ...

  10. Java EE JavaBean组件

    一.简介 JavaBean组件是一些可移植.可重用并可组装到应用程序中的Java类,类必须是具体的和公共的. 符合下列设计规则的任何Java类均是以JavaBean: 1.对数据类型“protype” ...