<!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. Android 中对于图片的内存优化方法

    Android 中对于图片的内存优化方法,需要的朋友可以参考一下     1. 对图片本身进行操作 尽量不要使用 setImageBitmap.setImageResource. BitmapFact ...

  2. 机器学习：YOLO for Object Detection (一)

    最近看了基于CNN的目标检测另外两篇文章,YOLO v1 和 YOLO v2,与之前的 R-CNN, Fast R-CNN 和 Faster R-CNN 不同,YOLO 将目标检测这个问题重新回到了基 ...

  3. C/C++面试题总结(1)

    首先说一下,这些东西,有的是必须掌握的,有的是面试时你讲出来就是闪光点.自己把握.把握不好的都搞懂.实在不行背下来. 由于时间关系,总结的比较随意,有的就直接贴链接了,希望理解一下. 第一篇:基础(必 ...

  4. 多级联动下拉菜单--cxSelect

    jquery cxSelect插件 github地址:https://github.com/ciaoca/cxSelect demo地址:http://code.ciaoca.com/jquery/c ...

  5. 洛谷 P4220 & UOJ #347 通道 —— 随机化

    题目:https://www.luogu.org/problemnew/show/P4220 http://uoj.ac/problem/347 先写了一下 n^2 和三棵树一样的情况,n^2 还写了 ...

  6. docker-ce安装与搭建私有仓库

    https://www.cnblogs.com/sszhou/p/7389144.html 系统环境centos7 ###docker-ce安装###1.卸载老版本,较老版本的Docker被称为doc ...

  7. Centos6.5 安装pip

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

  8. js---数组习题---

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

  9. Python-RabbitMQ消息队列的发布与订阅

    RabbitMQ消息队列的发布与订阅类似于广播,一端发送消息,多个客户端可以同时接收到消息 fanout:所有绑定到exchange的queue都可以接收消息 消息发布端 # -*- coding:u ...

  10. XML解析代码课堂讲解实例

    //获取所有的子元素,不包括回车 package com.dom4jDemo; import java.io.File; import java.util.List; import org.dom4j ...