<!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. u盘安装ubuntu 12.04 server问题解决

    问题: 使用UltraISO 9.5.3制作U盘启动盘,ISO文件使用ubuntu-12.04.2-server-i386.iso,ISO文件经过MD5验证是正确的. 将U盘查到计算机上,进bios选 ...

  2. BZOJ5324 JXOI2018 守卫

    传送门 这是我见过的为数不多的良心九怜题之一 题目大意 给定一段$n$个点构成的折线,第$i$个折点的坐标是$(i,h_i)$,你可以在$i$点放置一个视野,定义$i$能看到$j$当且仅当$i$处有视 ...

  3. ACM学习历程—HDU5478 Can you find it（数论）（2015上海网赛11题）

    Problem Description Given a prime number C(1≤C≤2×105), and three integers k1, b1, k2 (1≤k1,k2,b1≤109 ...

  4. 几个最短路径算法Floyd、Dijkstra、Bellman-Ford、SPFA的比较

        几大最短路径算法比较 转自:http://blog.csdn.net/v_july_v/article/details/6181485 几个最短路径算法的比较: Floyd        求多 ...

  5. NetScaler VPX在Azure上的部署（一）

    本文将介绍NetScaler的VPX部署在Azure China上.包括如何通过vhd文件上传.创建虚拟机,以及如何部署VPX. 一.首先将VHD文件解压,放到目录D:\Azure中.VHD文件的获得 ...

  6. css动画和渐变

    变形: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 元素的变形:transform transform:none | <tra ...

  7. 查看Linux内核版本的命令

    方法一: 命令: uname -a  作用: 查看系统内核版本号及系统名称  方法二:  命令: cat /proc/version 作用: 查看目录"/proc"下version ...

  8. ss3

    1)执行如下命令,进行安装shadowsocks(命令需要一条条的输入,然后回车,执行完一条,在执行下一条命令),过程中可能会让你选择确认的地方,直接输入"y"回车即可: yum ...

  9. TS学习之函数

    定义函数类型(规定函数参数及函数返回值的类型,若函数没有返回值,则返回类型为null) function add(x: number, y: number): number { return x + ...

  10. ObservableCollection和List的区别总结

    一.继承的类和接口,还有它们的方法不同 1)ObservableCollection比较简单,继承了Collection, INotifyCollectionChanged, INotifyPrope ...