<!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. 在Service里调用AlertDialog

    用常规的方法在AlertDialog的时候,会报错,大意是「can not add window in this view」. 原因是Service是没有界面的,只有Activity才能添加界面. 解 ...

  2. codeforces round 420 div2 补题 CF 821 A-E

    A Okabe and Future Gadget Laboratory 暴力 #include<bits/stdc++.h> using namespace std; typedef l ...

  3. 架构-MVVM：MVVM核心概念

    ylbtech-架构-MVVM:MVVM核心概念 1.返回顶部 1. MVVM模式是Model.View.ViewModel的简称,最早出现在WPF,现在Silverlight中也使用该模式,MVVM ...

  4. 用 SDL2 显示一张图片

    来源: http://adolfans.github.io/sdltutorialcn/ (中文教程) http://www.willusher.io/pages/sdl2/ (英文教程) 环境:SD ...

  5. Linux系统安装完的调整和安全

    精简开机系统自启动 •五个企业环境中开机自启动的服务; sshd:远程连接linux服务器必须开启 rsyslog:日志相关软件 network:网络服务 crond:系统和用户配置的计划任务周期性进 ...

  6. 任务22：课程介绍 & 任务23：Http请求的处理过程

    任务23:Http请求的处理过程 http的处理过程 用户输入一个地址

  7. 改造u3d第一人称控制器，使之适合Cardboard+蓝牙手柄控制

    一.在u3d编辑器中删除FPSController游戏对像中自带的Camera: 二.在u3d编辑器中将CardBoardMain游戏对像添加到FPSController的子物体: 三.修改脚本: 1 ...

  8. PCB 线路铜皮面积(残铜率)计算的实现方法

    一个多月没更新博客园了,这里继续分享关于PCB工程相关一些知识,做过PCB工程都知道用使用genesis或incam是可以非常方便的计算得到铜皮面积这个参数[下图],但实际这个软件是通过什么算法计算出 ...

  9. 模板 - 动态规划 - 概率期望dp

    https://blog.csdn.net/myjs999/article/details/81022546

  10. “玲珑杯”线上赛 Round #17 河南专场 A: Sin your life（和化积公式）

    传送门 题意 略 分析 首先将sin(x)+sin(y)+sin(z)h转化成\(2*sin(\frac{x+y}2)*cos(\frac{x-y}2)+sin(z)\),而cos(z)=cos(-z ...