<!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. Redis 之string结构及命令详解

    1.set  key  value  ex  秒数   px  毫秒数  nx / xx  设置一个值,注:ex 与 px 同时存在时,取写在后面的一个为有效期,nx表示key不存时设置成功,xx表示 ...

  2. js手机移动端选择插件 mobileSelect.js

    一.mobileSelect获取方法 mobileSelect支持单选.多级联动.自定义回调函数.二次渲染.最新版本下载地址[2017-09-21更新]: https://github.com/onl ...

  3. 前端工具gulp

    最近在写一个新的项目,用到了新框架,主要是:react+webpack.里面还用到了一个前端工具——gulp. gulp在项目里的作用是打包静态资源.编译less,压缩css等.js并不在处理之列(不 ...

  4. Golang实现常用排序算法

    主函数package main import ( "fmt" "math/rand" "sort" "time") co ...

  5. Linux思维导图之文本工具、正则

    习题巩固: 1,找出的ifconfig"网卡名"命令结果中本机的IPv4的地址 2,查出分区空间使用率的最大百分比值 3,查出用户UID最大值的用户名,UID及壳类型 4,查出的/ ...

  6. jQuery(UI)常用插件

    jQuery 官方网站:http://jquery.com/ 下载地址:http://jquery.com/download/ 插件地址: http://plugins.jquery.com/ 常用插 ...

  7. flask日期和时间

    本文翻译自The Flask Mega-Tutorial Part XII: Dates and Times 这是Flask Mega-Tutorial系列的第十二部分,我将告诉你如何以适配所有用户的 ...

  8. mysql优化sql语句

    mysql优化sql语句   常见误区   www.2cto.com   误区1:   count(1)和count(primary_key) 优于 count(*)   很多人为了统计记录条数,就使 ...

  9. EXPLAIN sql优化方法（1） 添加索引

    添加索引优化器更高效率地执行语句 假设我们有两个数据表t1和t2,每个有1000行,包含的值从1到1000.下面的查询查找出两个表中值相同的数据行: mysql> SELECT t1.i1, t ...

  10. java.lang.Object 方法解析

    1.clone() a.是一个native方法,效率比非native高 b.是protected 修饰的,要用他必须继承object,默认都是继承object的 c.返回是一个object 对象,需要 ...