<!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. CDR中国元素圆形花纹矢量图制作流程

    在论坛中看到这样一个问题,想要使用CorelDRAW矢量绘图工具做出下图所示的中国元素圆形花纹矢量图,小编潜心研究一下,最终有了绘制方法,今天给大家分享下. 步骤一:画同心圆,先画出10个,这个是根据 ...

  2. 完全掌握vuex

    公司项目中大量的使用了vue,感觉对vue知识的掌握也越来越熟练了,录制视频教程也让我受益匪浅,自己成长的同时,我更希望帮助其他前端小伙伴一起成长.这篇文章我们主要讲解vuex. vuex是一个专门为 ...

  3. tomcat配置SSH加密

    [root@tomcat2 ~]# keytool -genkeypair -alias tomcat -keyalg RSA -keystore /usr/local/tomcat7/keystor ...

  4. scrapy获取重定向之前的url

    通过 response.request.meta['redirect_urls'] 来获取跳转之前的链接

  5. 什么是Capability

    desired capability的功能是配置Appium会话.他们告诉Appium服务器您想要自动化的平台和应用程序. Desired Capabilities是一组设置的键值对的集合,其中键对应 ...

  6. 天翼云 RDS数据库操作

    1.RDS数据库创建好之后点击RDS实例管理找到已下信息 官方文档 -1:http://www.ctyun.cn/help/qslist/567 官方文档 -2:http://www.ctyun.cn ...

  7. tp5 前置方法

    Route::any('adminapi/v1/login','adminapi/v1.login/login');Route::any('adminapi/v1/first','adminapi/v ...

  8. （17）Spring Boot普通类调用bean【从零开始学Spring Boot】

    我们知道如果我们要在一个类使用spring提供的bean对象,我们需要把这个类注入到spring容器中,交给spring容器进行管理,但是在实际当中,我们往往会碰到在一个普通的Java类中,想直接使用 ...

  9. UDP bind（） IP和prot

    http://blog.csdn.net/qq_28171461/article/details/69523604

  10. PostgreSQL sum typecasting as a bigint

    https://stackoverflow.com/questions/20203081/postgresql-sum-typecasting-as-a-bigint Question: I am d ...