<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>css3旋转立方体效果</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            .box{

                width: 400px;

                height: 400px;

                border: 1px solid #000;

                margin: 30px auto;

                perspective: 1200px;/*设置元素被查看位置的视图----景深 看物体的远近 数值大越远*/

                -webkit-perspective: 1200px; /* Safari 和 Chrome */

            }

            .box ul{

                width: 300px;

                height: 300px;

                border: 1px solid #000000;

                position: relative;

                transform-style: preserve-3d;  /*设置3d场景*/

                -webkit-transform-style: preserve-3d;    /* Safari 和 Chrome */

                animation: move 2s infinite linear;  /*运动时间代表动画循环快慢*/

                transform-origin: center center 150px; /*第三个需要给具体数值*/

                -webkit-transform-origin:center center 150px;

                margin: 50px;

            }

            .box ul li{

                width: 300px;

                height: 300px;

                line-height: 300px;

                position: absolute;

                font-size: 50px;

                transition: all .5s;

                text-align: center;

                list-style: none;

            }

            .box ul li:nth-of-type(1){

                background: red;

                opacity: 0.5;

            }

            .box ul li:nth-of-type(2){

                background: blue;

                opacity: 0.5;

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

                -webkit-transform: translateX(300px) rotateY(-90deg);    /* Safari 和 Chrome */

                transform-origin: left;

                -webkit-transform-origin:left;

            }

            .box ul li:nth-of-type(3){

                background: blueviolet;

                opacity: 0.5;

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

                -webkit-transform: translateX(-300px) rotateY(90deg);

                transform-origin: right;

                -webkit-transform-origin:right;

            }

            .box ul li:nth-of-type(4){

                background: brown;

                opacity: 0.5;

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

                -webkit-transform: translateY(-300px) rotateX(-90deg);

                transform-origin: bottom;

                -webkit-transform-origin:bottom;

            }

            .box ul li:nth-of-type(5){

                background: deeppink;

                opacity: 0.5;

                transform: translateY(300px) rotateX(90deg);

                -webkit-transform: translateY(300px) rotateX(90deg);

                transform-origin: top;

                -webkit-transform-origin:top;

            }

            .box ul li:nth-of-type(6){

                background: yellow;

                opacity: 0.5;

                transform: translateZ(300px);

                -webkit-transform: translateZ(300px);

            }

            @keyframes move{

                from{transform: rotateY(0deg);}

                to{transform: rotateY(360deg);}

            }

            @-webkit-keyframes move{

                from{-webkit-transform: rotateY(0deg);}

                to{-webkit-transform: rotateY(360deg);}

            }

        </style>

    </head>

    <body>

        <div class="box">

            <ul>

                <li>最骚的css3</li>

                <li>最骚的css3</li>

                <li>最骚的css3</li>

                <li>最骚的css3</li>

                <li>最骚的css3</li>

                <li>最骚的css3</li>

            </ul>

        </div>

    </body>

</html>

纯手写的css3正方体旋转效果的更多相关文章

  1. springmvc 动态代理 JDK实现与模拟JDK纯手写实现。

    首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用  ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...

  2. 简易-五星评分-jQuery纯手写

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  3. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  4. 超级简单的jQuery纯手写五星评分效果

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  5. 纯手写Myatis框架

    1.接口层-和数据库交互的方式 MyBatis和数据库的交互有两种方式: 使用传统的MyBatis提供的API: 使用Mapper接口: 2.使用Mapper接口 MyBatis 将配置文件中的每一个 ...

  6. SQL纯手写创建数据库到表内内容

    建表啥的只点点鼠标,太外行了,不如来看看我的纯手写,让表从无到有一系列:还有存储过程临时表,不间断的重排序: 一:建数据库 create Database Show on primary ( name ...

  7. 纯手写SpringMVC到SpringBoot框架项目实战

    引言 Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 通过这种方式,springboot ...

  8. css3纯手写loading效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 纯手写实现ajax分页功能

    前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...

随机推荐

  1. oracle：对Index重建、分析

    对index进行分析,index_stats 表很有用.下面例子就结合index相关操作及 index_stats 的使用,对index进行分析. SQL> select count(*) fr ...

  2. docker 初试---常用命令

    http://blog.csdn.net/wsscy2004/article/details/25878363 常用命令 查看容器的root用户密码 docker logs <容器名orID&g ...

  3. codeforces 672C C. Recycling Bottles(计算几何)

    题目链接: C. Recycling Bottles time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  4. 换行和flush()

    在尝试使用BufferedReader的readLine方法读出每一行数据,再用FileWriter依次写到文件里的时候,用了下面的代码段: fr = new FileReader("c:/ ...

  5. 关于将word转化为pdf 文件调用jacob 包

    用jacob. 先到官方网站上去下载:http://sourceforge.net/project/showfiles.php?group_id=109543&package_id=11836 ...

  6. JS 之正则表达式

    字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界. -或- 对 ...

  7. 哈希加密和MD5加密函数

    import hashlib #----------------------------MD5算法 # def Md5(n): # m = hashlib.md5() # m=hashlib.sha2 ...

  8. E20180423-hm

    disclosure  n. (发明等的) 公开; 泄露,揭露; 开诚布公的话; 被公开的事情,被披露的秘闻; alignment n. 结盟; 队列,排成直线; 校直,调整; [工] 准线; ali ...

  9. E20170510-hm

    prototype  n.     原型,雏形,蓝本; omit (omitted)  vt.     省略; 遗漏; autonomous  adj.     自治的; 有自主权的; fold   ...

  10. HDU6031:Innumerable Ancestors（二分+倍增数组）

    传送门 题意 n个点的图,有n-1条无向边,m个询问,每次询问 给出两个集合a和b,找到a的一个元素x,b的一个元素y,使得x和y的lca深度最大 分析 这道题如果直接暴力做,复杂度为O(mk1k2* ...