<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS 3D转换</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background-color: #F7F7F7;

        }

        .box {

            width: 100px;

            height: 100px;

            text-align: center;

            line-height: 100px;

            font-size: 24px;

            margin: 100px auto;

            position: relative;

            transform: rotateY(30deg) rotateX(-30deg);

            transform-style: preserve-3d;

            /*perspective:200px;*/

            animation: rotate 4s linear infinite;

        }

        .box div{

            width: 200px;

            height: 200px;

            position: absolute;

            left: 0;

            top: 0;

            opacity: 0.6;

        }

        .front{

            transform: translateZ(100px);

            background: pink;

        }

        .back{

            transform: translateZ(-100px) rotateY(180deg);

            background: green;

        }

        .left{

            transform: translateX(-100px) rotateY(-90deg);

            background: yellowgreen;

        }

        .right{

            transform: translateX(100px) rotateY(90deg);

            background: blueviolet;

        }

        .top{

            transform: translateY(-100px) rotateX(90deg);

            background: blue;

        }

        .bottom{

            transform: translateY(100px) rotateX(-90deg);

            background: red;

        }

        @keyframes rotate {

            from{

                transform: rotateY(30deg) rotateX(-30deg);

            }

            to{

                transform: rotateY(390deg) rotateX(-30deg);

            }

        }

    </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>

3D旋转立方体案例的更多相关文章

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

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

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

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

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

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

  4. 360度3D 旋转插件

    Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...

  5. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 制作3D图片立方体旋转特效

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...

  7. CSS3 3D图片立方体旋转

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  9. CSS3——3D旋转图（跑马灯效果图）

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

随机推荐

  1. 【转】在VMware中为Linux系统安装VM-Tools的详解教程

    在VMware中为Linux系统安装VM-Tools的详解教程 如果大家打算在VMware虚拟机中安装Linux的话,那么在完成Linux的安装后,如果没有安装Vm-Tools的话,一部分功能将得不到 ...

  2. Java基础学习笔记之：System类;Math类;Arrays类BigInteger，BigDecimal

    System类 在API中System类介绍的比较简单,我们给出定义,System中代表程序所在系统,提供了对应的一些系统属性信息,和系统操作.System类不能手动创建对象,因为构造方法被priva ...

  3. 模拟人的手指在UI上滑动时3D模型跟随着移动（Unity）

    问题: 怎么让当手指滑动的同时对应的模型发生旋转 解决办法: 1:通过控制摄像机或者模型来实现效果 2:通过获取鼠标移动时X轴Y轴的偏移量来确定模型的旋转角度 3:为了不让人感觉到突兀,建议使用Mat ...

  4. 15.5.5 【Task实现细节】围绕 await 表达式的控制

    任何 await 表达式均表示执行路径的一个分支.首先,被等待的异步操作得到一个awaiter,然后检查其 IsCompleted 属性.若返回 true ,即可立即获得结果并继续.否则,需进行以下处 ...

  5. tornado服务器运行django应用

    在jumpserver项目中看到的 def main(): from django.core.wsgi import get_wsgi_application import tornado.wsgi ...

  6. kotlin来了！！

    小编前端时间由于工作比较繁忙,没有更新帖子... 最近又再技术博客上逛时发现了 “Kotlin”, 1.据听说挺厉害的,该语言是由战斗民族俄罗斯人发明的!! 2.据听说前后端都可以做 3.据听说安卓大 ...

  7. States of Integrity Constraints

    States of Integrity Constraints As part of constraint definition, you can specify how and when Oracl ...

  8. 0816关于MySQL的审计 init-connect+binlog实现用户操作追踪

    转自:http://blog.sina.com.cn/s/blog_605f5b4f01013xkv.html mysql 用init-connect+binlog实现用户操作追踪 做access 的 ...

  9. HDU 3389

    对于这道题,我们需要从(A+B)%3==0这式子考虑.对于第一条式子,我们可以知道,只能是奇偶盒子交替转移. 由第二条式子可知,要么是同余为0的A,B之间转移,要么是余数为1,2之间的 转移.后来仔细 ...

  10. 【机房收费系统C#版】——导出Excel

    前言 机房合作開始好长了一段时间.反重复复开了几次会,项目也是一拖再拖,作为组长.有80%的责任都在于我.为了不让这个项目陪着我过春节.要求自己一定要在这几天敲完. 还是一样的问题,用C#敲,从一開始 ...