<!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. 一步一步学Silverlight 2系列（26）：基本图形

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  2. Intel® Media SDK Media Samples Linux 学习笔记(转)

    最近折腾intel media sdk,主要硬件平台是在HD4600的核显上进行测试,intel media sdk是intel提供的一种基于核显的硬件编解码的解决方案,之前已经有使用ffmpeg进行 ...

  3. SPOJ：Lexicographically Smallest（并查集&排序）

    Taplu and Abhishar loved playing scrabble. One day they thought of inventing a new game using alphab ...

  4. assign.py

    #链式赋值 m=n=[1,2,3] m[0]=2 print(m,n) #m,n都改变了 x=y='xxx' y='yyy' print(x,y) #只有y 改变 #序列解包 x,y,z=1,2,3 ...

  5. Python项目使用memcached缓存

    前言许多Web应用都将数据保存到MySQL这样的关系型数据库管理系统中,应用服务器从中读取数据并在浏览器中显示. 但随着数据量的增大.访问的集中,就会出现数据库的负担加重.数据库响应恶化. 网站显示延 ...

  6. IOS：程序的退出、App间的跳转

    今天在做一个音乐播放器的项目,发现这个点击退出程序的功能不能实现终于找到了一些有用的资料,就去网上看了半天资料,下面是退出程序的代码: 在动画里面可以自己添加一些,动画,达到相应的效果. AppDel ...

  7. eclipse快捷键设置

    文章斋词水电费 55 48 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开 ...

  8. python mixin到底是什么 django

    1.什么是Mixin 在面向对象编程中,Mixin是一种类,这种类包含了其他类要使用的方法,但不必充当其他类的父类.其他类是如何获取Mixin中的方法因语言的不同而不同.所以有时候Mixin被描述为' ...

  9. 洛谷 - P1434 - 滑雪 - 有向图最长链

    https://www.luogu.org/problemnew/show/P1434 有向图的最长链怎么求?有环肯定不行,这里保证无环.(否则应该使用toposort先求出所有不带环的位置) 设dp ...

  10. 面试那点小事，你从未见过的spring boot面试集锦（附详细答案）

    一, 什么是spring boot? 多年来,随着新功能的增加,spring变得越来越复杂.只需访问页面https://spring.io/projects,我们将看到所有在应用程序中使用的不同功能的 ...