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. GDAL中通过GDALDriver类的Create函数实现图像的保存

    GDAL中除了读取各种类型的图像外,也可以实现对各种图像的保存操作,具体实现测试代码如下: int test_gadl_GDALDataset_write() { const char* image_ ...

  2. #333. 【NOIP2017】宝藏

    #333. [NOIP2017]宝藏 http://uoj.ac/problem/333 1.错误的$n^42^n$做法: dp[s]表示当前的点集为s,然后从这些点中选一个做起点i,然后枚举边,然后 ...

  3. 获取文件mimes

    <?php /* * Copyright 2010-2013 Amazon.com, Inc. or its affiliates. All Rights Reserved. * * Licen ...

  4. DevOps是一种文化，不是角色！

    一.DevOps是一种文化,不是角色! 软件无处不在.在如今的世界里,每个主流公司/组织都和软件开发息息相关,并且公司需要向软件一样运作.更快且更敏捷,同时保证安全性和可靠性,这样的要求前所未有的强烈 ...

  5. selenium 标签页切换

    from selenium import webdriver import time browser=webdriver.Chrome() browser.maximize_window() # 窗口 ...

  6. JAVA学习笔记--迭代器

    迭代器(Iterator)是一种设计模式.它是一个对象,它的工作是遍历并选择序列中的对象,而客户端程序员不必知道或关心该序列底层的结构.创建迭代器的代价小,因而迭代器通常被称为轻量级对象. 一.Ite ...

  7. hibernate.hbm.xml文件配置入门小结（1）

    在Hibernate中,各表的映射文件xxx.hbm.xml可以通过工具生成,例如在使用MyEclipse开发时,它提供了自动生成映射文件的工具. hibernate.hbm.xml文件的基本结构如下 ...

  8. Linux 深入理解inode/block/superblock

    基础命令学习目录首页 原文链接:https://blog.csdn.net/Ohmyberry/article/details/80427492 档案系统特性 传统的磁盘与档案系统之应用中,一个分割槽 ...

  9. 清空git缓存

    git rm -r --cached .git add . git commit -m 'update .gitignore' 读了下git文档,才发现,这些东西其实很简单,很容易理解.cached其 ...

  10. windows64系统下安装 redis服务 （详细）

    Linux下Redis安装链接 :     转到 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表) ...