<!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. Perl解析JSON数据精解

    简介:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - Dece ...

  2. python中list用法及遍历删除元素

    列表(list)是python的基本数据结构,list中每一个元素都分配一个位置索引,可以通过索引访问元素值,list不要求数据项有相同的数据类型. list初始化 list由一个方括号加内部由逗号分 ...

  3. maven之setting.xml的配置详解

    文件存放位置 全局配置: ${M2_HOME}/conf/settings.xml 用户配置: ${user.home}/.m2/settings.xml note:用户配置优先于全局配置.${use ...

  4. PostgreSQ 连接问题 FATAL: no pg_hba.conf entry for host

    PostgreSQ数据库为了安全,它不会监听除本地以外的所有连接请求,当用户通过JDBC访问是,会报一些如下的异常: org.postgresql.util.PSQLException: FATAL: ...

  5. java web url编码解码问题(下载中文名文件)

    问题描述:需要url直接访问中文名的文件,类似于在地址栏里直接输入http://localhost:8080/example/丽江旅游攻略.doc 来进行文件下载,tomcat的server.xml文 ...

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

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

  7. 二分匹配ZOJ3646

    //题意:类比线代里:把矩阵中的U看作[1],是否满足一个满秩矩阵 //利用二分匹配就是 //每一行都有相对应的列: #include<iostream> #include<stri ...

  8. mysql事务隔离级别实验

    一.实验数据: 建表语句: CREATE TABLE `isolation` ( `id` int(11) NOT NULL, `name` varchar(255) CHARACTER SET ut ...

  9. oracle 表空间及查看所有用户的表空间

    用户有默认表空间,但是只能指定一个,但是你有其它表空间的限额的话,可以将表建到其它表空间中. 语法 create table xxx(xxxx xx) tablespace xxxxx 1.查看当前用 ...

  10. Hdu 4513 吉哥系列故事——完美队形II (manacher变形)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4513 题目描述: 打完题目描述了,点开题目,发现题目是中文,orz.jpg.果断又删掉了,习惯真可怕 ...