<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--抱歉，时间紧暂时只写了谷歌的方法，ie等浏览器的兼容还没写0.0.-->
    <title>C3旋转立方体</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: skyblue;
        }
        .box {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            position: relative;
            /*3d旋转效果*/
            transform: rotate3d(1, 1, 0, -30deg);
            /*保留旋转效果不让回来*/
            transform-style: preserve-3d;
            /*喜欢添加景深效果的可以自己调节啊*/
            perspective: 0px;
            /*角度*/
            perspective-origin: 0px 0px;
        }
        .box > div {
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: 0.5;
            text-align: center;
            line-height: 200px;
        }
        .front {
            background-color: #ffc96b;
            transform: translateZ(100px);
        }
        .back {
            background-color: #a2faff;
            transform: translateZ(-100px) rotate(180deg);
        }
        .left {
            background-color: #ffcef2;
            transform: translateX(-100px) rotateY(-90deg);
        }
        .right {
            background-color: #a2d1ff;
            transform: translateX(100px) rotateY(90deg);
        }
        .top {
            background-color: #f0f4ff;
            transform: translateY(-100px) rotateX(90deg);
        }
        .bottom {
            background-color: #26d8ff;
            transform: translateY(100px) rotateX(-90deg);
        }

        .box:hover {
            animation: move 5s infinite linear;
        }
        @keyframes move {
            from {
                transform: rotate3d(1, 0, 0, 290deg);
            }
            50% {
                transform: rotate3d(0, 1, 0, -290deg);
            }
            to {
                transform: rotate3d(0, 0, 1, 266deg);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="front">FRONT</div>
    <div class="back">BACK</div>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
    <div class="top">TOP</div>
    <div class="bottom">BOTTOM</div>
</div>
</body>
</html>

css3旋转立方体-_-的更多相关文章

  1. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  2. 第102天：CSS3实现立方体旋转

    CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. css3之3D 旋转立方体与哆啦A梦

    主要记录两个css3 3D转换的示例   ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...

  4. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

  5. CSS3全览_动画+滤镜

    CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...

  6. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. css3旋转小三角

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  9. CSS之旋转立方体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. dubbo monitor simple 监控原理分析

    监控机制: 服务消费者和提供者,在内存中累计调用次数和调用时间,定时每分钟发送一次统计数据到监控中心.监控中心负责统计各服务调用次数,调用时间等. 监控元数据存储目录结构: --dubbo.jetty ...

  2. bzoj 2460: 元素 线性基

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=2460 题解: RT 线性基裸题 #include <cstdio> #inc ...

  3. 第k小和（搜索）

    Description [问题描述] 从n个数中选若干(至少1)个数求和,求所有方案中第k小的和(和相同但取法不同的视为不同方案).[输入格式]    第一行输入2个正整数n,k.    第二行输入这 ...

  4. 使用MDI窗体实现多窗口效果

    本文章已收录于:   C#MDI窗体实现多窗口效果   Visual C#是微软公司推出的下一代主流程序开发语言,他也是一种功能十分强大的程 序设计语言,正在受到越来越多的编程人员的喜欢.在Visua ...

  5. openfire存储中文字符乱码解决办法

    转载于: Xmpp问题总结:处理Openfire 中文乱码问题(2) openfire是一个非常不错的IM服务器,而且是纯Java实现,具有多个平台的版本,他的数据存储可以采用多种数据库,如MySQL ...

  6. Ubuntu下locale文件

    March 7, 2015 11:44 PM locale文件 关于locale文件的设定 locale 是国际化与本土化过程中的一个非常重要的概念,个人认为,对于中文用户来说,通常会涉及到的国际化或 ...

  7. Oracle 12c 多租户配置和修改 CDB 和 PDB 参数

    1. 配置CDB 实例参数,影响CDB与所有 PDB为CDB配置例程参数相对于对于非CDB的数据库是变化不太.ALTER SYSTEM命令用于设置初始化参数,与使用ALTER DATABASE命令修改 ...

  8. 【转】 Pro Android学习笔记（五一）：ActionBar（4）：标准和Tab模式

    之前,我们学习的Action Bar是标准模式,Tab模式的如下图所示. 对于Tab,我们在Android学习笔记(二二): 多页显示-Tag的使用中学习过,但Action Bar的tab更适合fra ...

  9. yum软件包管理器

    Yum (Yellow dog Updater, Modified) 黄狗升级器是一个在 Fedora 中的字符前端软件包管理器.基于 RPM 包管理(介绍见RPM包及其管理),能够从指定的服务器自动 ...

  10. 面向对象要点（this关键字）

    package day07; public class ThisKeywords { private String name; private void Foo(String name) { this ...