<!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. thinkphp中图片上传的几种好的办法

    http://www.thinkphp.cn/code/701.html http://www.thinkphp.cn/code/151.html

  2. C语言小程序（五）、数组查询

    随机产生一些字符,然后输入要查找的字符,本想将查找到的字符存储起来,要么初始化一个等大小的数组,要么要先检索出总共查找到多少个元素,再开辟空间存储,但这样相当于搜索了两遍,没有想到更好的方法,只是简单 ...

  3. 第k大区间(平均数)--LH

    老师自己出的题,由于没有评测的地方, 我就只说做法啦.(其实是懒得写)(逃ヽ(ﾟ∀ﾟ*)ﾉ━━━ｩ♪ 以下是个人的见解,如果错了告诉我哦⊙0⊙? 最近特别喜欢用画图写字,,☆⌒(*^-゜)v!

  4. bzoj 4006 管道连接 —— 斯坦纳树+状压DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4006 用斯坦纳树求出所有关键点的各种连通情况的代价,把这个作为状压(压的是集合选择情况)的初 ...

  5. Poj 2503 Babelfish(Map操作)

    一.Description You have just moved from Waterloo to a big city. The people here speak an incomprehens ...

  6. HDOJ1059(多重部分和问题)

    #include<cstdio> #include<cstring> using namespace std; +; ]; int dp[SIZE]; bool check() ...

  7. Swift3.0 基础学习梳理笔记(一)

    本篇是我在学完一遍基础语法知识的时候,第一遍复习,我一遍梳理一遍记录的笔记.同时分享给像我一样在学习swift 的猿友们. 本篇可能过于冗长.所以所有的参考资料都分模块的写在palyground 里, ...

  8. LAMP 1.6 Discuz打开错误

    打开discuz失败, ps aux |grep mysql ps aux |grep httpd 查看mysql apache有没有打开. 重启mysql service mysqld restar ...

  9. WEB 项目中的全局异常处理

    在web 项目中,遇到异常一般有两种处理方式:try.....catch....:throw 通常情况下我们用try.....catch.... 对异常进行捕捉处理,可是在实际项目中随时的进行异常捕捉 ...

  10. assert.ok()

    测试 value 是否为真值. 相当于 assert.equal(!!value, true, message). 如果 value 不为真值,则抛出一个带有 message 属性的 Assertio ...