代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 星空旋转正方体</title>
    <style type="text/css">
    body{
        background-image:linear-gradient(to top,blue,#000);
    }
    *{
        padding: 0;
        margin:0;
    }
    #Mypage{
        /*-webkit-perspective:600px;
        -webkit-perspective-origin:50% 50%;*/
        -webkit-transform-style:preserve-3d;
        position: relative;
        width: 400px;
        height: 400px;
        margin:100px auto;
    }
    #Mypage li{
        list-style:none;
    }
    .pages{
        position: absolute;
        width:400px;
        height:400px;
    }
    #page1{
        background-color: #FF0088;
        -webkit-transform:translateZ(200px);
    }
    #page2{
        background-color: #FFFF00;
        -webkit-transform:rotateX(90deg) translateZ(200px);
    }
    #page3{
        background-color: #00FF00;
        -webkit-transform:rotateX(270deg) translateZ(200px);
    }
    #page4{
        background-color: #00FFFF;
        -webkit-transform:rotateY(90deg) translateZ(200px);
    }
    #page5{
        background-color: #7700FF;
        -webkit-transform:rotateY(270deg) translateZ(200px);
    }
    #page6{
        background-color: #FF00FF;
        -webkit-transform:translateZ(-200px);
    }
    #closth{
        margin: 0 auto;
        font-size: 18px;
        text-align: center;
        padding-top: 100px;
        float: left;
    }
    #closth div{
        padding-top: 20px;
        margin-bottom: 15px;
    }
    #closth div a{
        color: #fff;
        margin-right: 40px;
    }
    #heard{
        width: 80%;
        margin: 0 auto;
        margin-bottom: 300px;
    }
    #Opage{
        margin-top: 20px;
    }
    .wrap:first-child{
        margin-left: 400px;
    }
    .wrap{
        float: left;
        list-style: none outside none;
        padding-right: 40px;
    }
    .wrap a{
        color: #fff;
    }
    </style>
</head>
<body>
<div id="heard">
    <div id="closth">
        <div><a href="javascript:tops()">上翻</a></div>
        <div><a href="javascript:lefts()">左翻</a><a href="javascript:cleanth()">重置</a><a href="javascript:rights()">右翻</a></div>
        <div><a href="javascript:bottoms()">下翻</a></div>
    </div>
     <ul id="Mypage">
         <li class="pages" id="page1"><img width="400px" height="400px"></li>
         <li class="pages" id="page2"><img width="400px" height="400px"></li>
         <li class="pages" id="page3"><img width="400px" height="400px"></li>
         <li class="pages" id="page4"><img width="400px" height="400px"></li>
         <li class="pages" id="page5"><img width="400px" height="400px"></li>
         <li class="pages" id="page6"><img width="400px" height="400px"></li>
    </ul>
    <ul id="Opage">
        <li class="wrap"><a href="javascript:ones()">1</a></li>
        <li class="wrap"><a href="javascript:twos()">2</a></li>
        <li class="wrap"><a href="javascript:threes()">3</a></li>
        <li class="wrap"><a href="javascript:fours()">4</a></li>
        <li class="wrap"><a href="javascript:fives()">5</a></li>
        <li class="wrap"><a href="javascript:sixs()">6</a></li>
    </ul>
</div>
    <script type="text/javascript">
        var x=0;
        var y=0;
        var n,m=0;
        function cleanth(){
            x=0;
            y=0;
            n=0;
            m=0;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 20ms linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
        }
        function count(){
            if(x%360==0){
                n=x/360;
            }
            if(y%360==0){
                m=y/360;
            }
        }
        function tops()
        {
            count();
            x+=90;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 3s linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
        }
        function bottoms(){
            count();
            x-=90;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 3s linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";

        }
        function lefts(){
            count();
            y+=90;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 3s linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";

        }
        function rights(){
            count();
            y-=90;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 3s linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";

        }
        function ones(){
            count();
            x=0+n*360;
            y=0+m*360;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 3s linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
        }
        function twos(){
            count();
            x=-90+n*360;
            y=m*360+0;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 3s linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
        }
        function threes(){
            count();
            x=90+n*360;
            y=0+m*360;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 3s linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
        }
        function fours(){
            count();
            x=0+n*360;
            y=m*360-90;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 3s linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
        }
        function fives(){
            count();
            x=0+n*360;
            y=90+m*360;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 3s linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
        }
        function sixs(){
            count();
            x=180+n*360;
            y=0+m*360;
             var curpage=document.getElementById('Mypage');
             curpage.style.transition='-webkit-transform 3s linear';
             curpage.style.transform="rotateX("+x+"deg) rotateY("+y+"deg)";
        }
    </script>
</body>
</html>

CSS实现正方体旋转的更多相关文章

  1. 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  2. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. CSS动画之旋转魔方轮播

    很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...

  4. 用html标签+css写出旋转的正方体

    有一段时间没写代码了,刚写有点手生,无从下手,为了能快速进入状态,就写了这一个小东西,纯用标签和样式表写.下面看一下我写的. 这一段是样式表: <style> *{ margin: 0; ...

  5. 纯CSS做3D旋转魔方

    昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方  效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试  做成自己特有的魔方 <!DOCTYPE h ...

  6. CSS缩放函数, 旋转函数与倾斜函数

       1 :缩放        scale(x,y)函数让元素根据中心原点对对象进行缩放,大于1进行放大,小于1则缩小,如果为负值,则先进行翻转再进行缩放操作. 实例: HTML: <div c ...

  7. 纯css代码写旋转动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 正方体旋转demo

    接着上一篇博客的内容顺藤摸瓜往下想,既然stage有景深这个概念,可以表达3D场景,那么这个stage就可以呈现立体几何咯,于是自己写了个Cubic Demo 一个正方体有6个面,我们把一个正方体平铺 ...

  9. 纯CSS实现立方体旋转

    下面为通过CSS动画实现的立方体旋转,可以改变CSS代码中关键帧定义(@keyframes)来改变立方体的旋转方式 HTML部分: <body class="body"> ...

随机推荐

  1. 机器学习实战笔记(Python实现)-01-K近邻算法(KNN)

    --------------------------------------------------------------------------------------- 本系列文章为<机器 ...

  2. LINUX下的PHP

    由于linux系统的稳定性,大部分的PHP服务器都被部署在linux上,而且像redis等扩展在linux能得到更好的支持,所以对于PHP程序员来说,使用linux的功底也相当重要,接下来总结一下我从 ...

  3. Ubuntu下Apache+SVN+submin实现WEB管理SVN

    为什么需要submin管理SVN? 原来在Ubuntu下,都是直接通过命令行创建SVN仓库并分配权限,但是这有一些问题: 每创建一个SVN仓库,都需要修改httpd.conf 每创建一个帐户,都需要手 ...

  4. android 发送短信功能

    private void sendSMS(String num,String smsBody) { String phoneNum = "smsto:" + num; Uri sm ...

  5. 理解 OpenStack 高可用(HA)(3):Neutron 分布式虚拟路由(Neutron Distributed Virtual Routing)

    本系列会分析OpenStack 的高可用性(HA)概念和解决方案: (1)OpenStack 高可用方案概述 (2)Neutron L3 Agent HA - VRRP (虚拟路由冗余协议) (3)N ...

  6. 识别 Linux上的设备(磁盘)类型

    1. Linux 上的设备 (device) Linux 操作系统中,各种设备驱动(device driver)通过设备控制器(device controller)来管理各种设备(device),其关 ...

  7. NYOJ-858下三角矩阵

    下三角矩阵 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 给定一个由0和1组成的矩阵.只允许交换相邻的两行,要把矩阵转化成下三角矩阵(主对角线上方的元素都是0),最少需 ...

  8. HDU 1848 Fibonacci again and again【SG函数】

    对于Nim博弈,任何奇异局势(a,b,c)都有a^b^c=0. 延伸: 任何奇异局势(a1, a2,… an)都满足 a1^a2^…^an=0 首先定义mex(minimal excludant)运算 ...

  9. [转]Windows平台下Makefile学习笔记

    Windows平台下Makefile学习笔记(一) 作者:朱金灿 来源:http://blog.csdn.net/clever101 决心学习Makefile,一方面是为了解决编译开源代码时需要跨编译 ...

  10. <转>打工与乘公交

    打工与乘公交 去一个公司打工就如同上了一辆公交车.在上车之前,你应该清楚自己打算去哪里,打算在哪里下车. 有的公交车很豪华,有的很破烂,但是这并不是重点,所有能开到目的地的车都是好车. 上了车之后,也 ...