<!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. Android多国语言文件夹汇总

    Arabic, Egypt (ar-rEG) —————————–阿拉伯语,埃及 Arabic, Israel (ar-rIL) ——————————-阿拉伯语,以色列 Bulgarian, Bulg ...

  2. Android「后台下载」Feb.24小记

    参考了CSDN上的这个文章(HERE),之前只是新开一个线程: public class DownloadThread implements Runnable{ String tarFile ; pu ...

  3. QTextEdit/QPlainTextEdit添加文字超出视图后，滚动条自动移至最底部

    void ThreadExit::onTaskPerformState(const QString& strStatus) { //追加文本(ui.taskStatusTextEdit是一个Q ...

  4. Ruby attr_reader , attr_writer, attr_accessor方法

    attr_reader方法------读取实例变量 attr_writer方法------改写实例变量 attr_accessor方法-----读写实例变量 class Person attr_rea ...

  5. 算法练习--LeetCode--29. Divide Two Integers

    Divide Two Integers Given two integers dividend and divisor, divide two integers without using multi ...

  6. EJ20170430-hm

    alignment  n. 结盟; 队列,排成直线; 校直,调整; [工] 准线 aspect ratio  n. 宽高比; 纵横比,屏幕高宽比 aspect   n. 方面; thick   n.  ...

  7. Codeforces702C【二分】

    题意: 给你几个城市,蜂窝塔量: 给出城市和塔的坐标可以重叠,非递减的方式给出: 输出最小的r,以至于所有的城市能被覆盖到: 思路: 目的就是要使每个城市覆盖到,那我对每个城市找离最近塔的距离,然后在 ...

  8. bzoj 1082: [SCOI2005]栅栏【二分+dfs】

    二分答案,dfs判断是否可行,当b[k]==b[k-1]时可以剪枝也就是后移枚举位置 #include<iostream> #include<cstdio> #include& ...

  9. P5167 xtq的神笔

    传送门 题解 倍增也好二分也好,果然复杂度只要和\(\log\)插上关系就没我啥事了-- 首先由一个显而易见然而我完全没有发现的结论,设\(calc(l,r)\)表示区间\([l,r]\)的\(or\ ...

  10. 用hdparm获取硬盘参数

    hdparm是Linux下一款能够获取和设置SATA/IDE设备参数的工具. 1.获取硬盘参数 $ sudo hdparm -i /dev/sda$ sudo hdparam -i /dev/sda ...