<!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. MySQL NULL 值如何处理？

    我们已经知道 MySQL 使用 SQL SELECT 命令及 WHERE 子句来读取数据表中的数据,但是当提供的查询条件字段为 NULL 时,该命令可能就无法正常工作. 为了处理这种情况,MySQL提 ...

  2. Restrictions.like("字段field","%表达式exp%");

    Restrictions.like("字段field","%表达式exp%");用hql语句就是 from table where field like '%e ...

  3. 获取第n天日期

    function datezh(s){ return s = s>9 ? s:"0"+s } function dateTime(t){ var getNowTime = v ...

  4. eas之style接口

    Obj可以是KDTable对象,也可以是IRow,IColumn,ICell对象锁定Obj.getStyleAttributes().setLocked(true);Obj.getStyleAttri ...

  5. 洛谷P1307 数字反转【水题】

    给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形式,即除非给定的原数为零,否则反转后得到的新数的最高位数字不应为零(参见样例2). 输入输出格式 输入格式: 一个整数 NN ...

  6. [luogu2414 NOI2011]阿狸的打字机 (AC自动机)

    传送门 Solution 我们知道AC自动机上如果有一点A的fail[A]->B那么B为A的一个后缀 那么我们的问题\((x,y)\)就变为在y中有多少个点直接或间接连向x的终止节点 如果写暴力 ...

  7. [51Nod 1218] 最长递增子序列 V2 (LIS)

    传送门 Description 数组A包含N个整数.设S为A的子序列且S中的元素是递增的,则S为A的递增子序列.如果S的长度是所有递增子序列中最长的,则称S为A的最长递增子序列(LIS).A的LIS可 ...

  8. c#--早绑定晚绑定

    原文地址 早绑定early binding: 在编译的时候就已经却确定了将来程序运行基类或者派生类的哪个方法. 在编译代码的时候根据引用类型就决定了运行该引用类型中定义的方法.即基类方法. 这种方式运 ...

  9. winform设置超时时间

    ); //设置超时时间 var completedTask = await Task.WhenAny(new Task(async () => { );//执行的方法示例这里用延迟代替 }), ...

  10. @RequestParam，@PathVariable等注解区别

    一.@RequestParam和@PathVariable的区别 1.@RequestParam是从uri中request后面的参数串来取得参数的 2.@PathVariable是从uri模板中取得参 ...