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. WPF Color、String、Brush转换

    原文:WPF Color.String.Brush转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/detai ...

  2. 1.Delphi Rest后台+MUI前台开发App前言

    尽管不是专业的程序猿,但是对Delphi的喜爱已经10多年了.一直以来用Delphi开发一些小应用若干个,同时用Delphi给朋友开发一些中小型的业务平台也有几个.可以说Delphi对于数据库的操作, ...

  3. Qt开发者关于QThread的咆哮——你们都用错了

    Qt开发者关于QThread的咆哮——你们都用错了 我们(Qt用户)正广泛地使用IRC来进行交流.我在Freenode网站挂出了#qt标签,用于帮助大家解答问题.我经常看到的一个问题(这让我不厌其烦) ...

  4. pyhon3.0 day01 变量、输入、输出、循环

    pyhon3.0 基础01 1 python解释器 Python的解释器很多,但使用最广泛的还是CPython.如果要和Java或.Net平台交互,最好的办法不是用Jython或IronPython, ...

  5. 通过dotnet命令行设置asp.net core服务的启动地址

    需求: 通过dotnet命令行启动asp.net core 服务时,自定义监听端口. 方法: 在program.cs中增加命令行参数配置: WebHost.CreateDefaultBuilder(a ...

  6. 一步步带你配置IIS（包括错误分析）

    今天趁着工作中的问题一下子来解决IIS配置 发布网站:点击VS发布网站 第一步:新建配置文件(我取名为webSite) : 第二步:选择发布方法并且选择把文件发布到哪里(比喻在D盘创建一个文件夹web ...

  7. （转）python+opencv实现动态物体追踪

    原文链接:https://blog.csdn.net/cike14/article/details/50649811 import cv2 import numpy as np camera=cv2. ...

  8. 各web服务器的特点和优势

    1.Tomcat 和 Jetty 面向java语言 天生就是重量级的web服务器.性能一般 2.IIS 只能在windows平台运行,windows作为服务器在稳定性与其他一些性能上不如类unix操作 ...

  9. cinder创建volume的流程-简单梳理

    1. cinder-api接收到创建的请求,入口:cinder.api.v2.volumes.VolumeController#create,该方法主要负责一些参数的重新封装和校验,然后调用cinde ...

  10. XSS 注入检查点

    如果你有个论坛,一般你会很注意用户发帖的注入问题,往往这个地方不会被注入,因为开发特别照顾.原则上XSS都是用户输入的,但是许多边角还是容易忽略.枚举一些检查点. 分页 分页通用组件获取url,修改p ...