<!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. codeforces 617E E. XOR and Favorite Number(莫队算法)

    题目链接: E. XOR and Favorite Number time limit per test 4 seconds memory limit per test 256 megabytes i ...

  2. codeforces 655C C. Enduring Exodus(二分)

    题目链接: C. Enduring Exodus time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  3. Java 关于创建String对象过程的内存分配

    一.String s = "abc"  和 String s = new String("abc") 的区别 1.String s = "abc&qu ...

  4. Nginx+ffmpeg的HLS开源服务器搭建配置及开发详

    本文概述: 至目前为止,HLS 是移动平台上非常重要并十分流行的流媒体传输协议.做移动平台的流媒体开发,不知道它不掌握它 ,真是一大遗憾.而HLS的平台搭建有一定的难度,本文针对对该方向有一定了解的朋 ...

  5. Qt Quick之TableView的使用

    本博只是简单的展示TableView的基本使用(TableView.style:TableViewStyle.headerDelegate.rowDelegate.itemDelegate.Table ...

  6. ACM学习历程—HDU 5072 Coprime（容斥原理）

    Description There are n people standing in a line. Each of them has a unique id number. Now the Ragn ...

  7. Centos6.5 安装pip

    1.下载 sudo wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate 2.安装  python get-pip.py 参 ...

  8. 使用PowerShell创建Azure Storage的SAS Token访问Azure Blob文件

    Azure的存储包含Storage Account.Container.Blob等具体的关系如下: 我们常用的blob存储,存放在Storage Account的Container里面. 目前有三种方 ...

  9. node.js的国内源

    node.js在使用npm安装包是,由于源是国外的,有可能会被GFW屏蔽. 通过下面的方法可以把源指向国内的. 具体方法如下: 编辑 ~/.npmrc 加入下面内容 registry = http:/ ...

  10. SciTE for Ruby的配置

    转自:http://my.oschina.net/xsinger/blog/14229?catalog=71266 下载下面这个文件:http://scintilla.sourceforge.net/ ...