CSS3-3D立方體動畫_ZenDei技術網路在線

CSS3-3D立方體動畫

-Advertisement-

關於CSS3的3D立方體動畫知識點： 1、每個元素有獨立的坐標系 2、坐標系隨當前元素的改變而發生改變 3、立方體由靜態transform參數構成 4、通過給容器添加動畫使立方體運動效果圖： ...

關於CSS3的3D立方體動畫

知識點：

　　1、每個元素有獨立的坐標系

　　2、坐標系隨當前元素的改變而發生改變

　　3、立方體由靜態transform參數構成

　　4、通過給容器添加動畫使立方體運動

效果圖：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .container{perspective:1200px; perspective-origin:50% 50% 200px;}
        .box{width:300px; height:300px; position:relative; transform-style:preserve-3d; border:1px gray solid; margin:50px auto; animation:goto 10s linear infinite; -webkit-animation:goto 10s linear infinite;}
        .page{width:200px; height:200px; opacity:1; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;}
        .page:nth-of-type(1){background-color:rgb(30,139,180); transform:rotateX(-90deg) translateZ(-100px);}
        .page:nth-of-type(2){background-color:rgb(125,163,23); transform:rotateX(90deg) translateZ(-100px);}
        .page:nth-of-type(3){background-color:rgb(208,165,37); transform:rotateY(-90deg) translateZ(-100px);}
        .page:nth-of-type(4){background-color:rgb(175,30,131); transform:rotateY(90deg) translateZ(-100px);}
        .page:nth-of-type(5){background-color:rgb(200,108,31); transform:translateZ(100px);}
        .page:nth-of-type(6){background-color:rgb(28,28,28); transform:translateZ(-100px);}

        @keyframes goto{
            0% {
                transform: rotateX(0deg) rotateY(0deg);
                -webkit-transform: rotateX(0deg) rotateY(0deg);
            }
            10% {
                transform: rotateX(0deg) rotateY(180deg);
                -webkit-transform: rotateX(0deg) rotateY(180deg);
            }
            20% {
                transform: rotateX(-180deg) rotateY(180deg);
                -webkit-transform: rotateX(-180deg) rotateY(180deg);
            }
            30% {
                transform: rotateX(-360deg) rotateY(180deg);
                -webkit-transform: rotateX(-360deg) rotateY(180deg);
            }
            40% {
                transform: rotateX(-360deg) rotateY(360deg);
                -webkit-transform: rotateX(-360deg) rotateY(360deg);
            }
            50% {
                transform: rotateX(-180deg) rotateY(360deg);
                -webkit-transform: rotateX(-180deg) rotateY(360deg);
            }
            60% {
                transform: rotateX(90deg) rotateY(180deg);
                -webkit-transform: rotateX(90deg) rotateY(180deg);
            }
            70% {
                transform: rotateX(0) rotateY(180deg);
                -webkit-transform: rotateX(0) rotateY(180deg);
            }
            80% {
                transform: rotateX(90deg) rotateY(90deg);
                -webkit-transform: rotateX(90deg) rotateY(90deg);
            }
            90% {
                transform: rotateX(90deg) rotateY(0);
                -webkit-transform: rotateX(90deg) rotateY(0);
            }
            100% {
                transform: rotateX(0) rotateY(0);
                -webkit-transform: rotateX(0) rotateY(0);
            }
        }
    </style>        
</head>        
<body>        
    <div class="container">        
        <div class="box">        
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
            <div class="page"></div>
        </div>
    </div>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

逆向工程

1.概念 ①正向工程：Java類→資料庫表 MyBatis不支持 ②逆向工程：資料庫表→Java類總結：通過MyBatis的jar包自動的生成資料庫所對應的Javabean。步驟： 1.①創建一個專門的工程用於生成Java文件先導包： 2.②pom.xml配置 3. ③創建generatorC ...
前端迷思與React.js

前端迷思與React.js 前端技術這幾年蓬勃發展, 這是當時某幾個項目需要做前端技術選型時, 相關資料整理, 部分評論引用自社區。開始吧: 目前， Web 開發技術框架選型為兩種的占 80% 。這種戲劇性的變化持續了近 6 年。自 2013 年 5 月推出以來，ReactJS 在過去三年中已成... ...
十億級視頻播放技術優化揭密

本文為轉載文章，文章來自：王輝|十億級視頻播放技術優化揭密 QCon是由InfoQ主辦的全球頂級技術盛會，每年在倫敦、北京、東京、紐約、聖保羅、上海、舊金山召開。自 2007年 3月份首次舉辦以來，已經有超萬名高級技術人員參加過QCon大會。QCon內容源於實踐並面向社區，演講嘉賓依據熱點話題，面向 ...
讀 Zepto 源碼之神奇的 $

無論是jquery還是zepto，都離不開$，這個符號似乎是萬能的，這篇文章通過zepto源碼來探究的就是$實現的原理。 ...
12個非常有用的JavaScript技巧

原文：12 Extremely Useful Hacks for JavaScript 作者：Caio Ribeiro Pereira 翻譯：雁驚寒 ...
Vuejs的一些總結

1.Vuejs組件這裡註意一點，組件要先註冊再使用，也就是說如果反過來會報錯，因為反過來代表先使用了組件的，但是組件卻沒註冊。 webpack報錯後，使用webpack --display-error-details可以排錯 2.指令keep-alive 在看demo的時候看到在vue-rout ...
螞蟻金服新一代數據可視化引擎 G2

新公司已經呆了一個多月，目前著手一個數據可視化的項目，數據可視化肯定要用到圖形庫如、、、等，經決定我的這個項目用阿裡旗下螞蟻金服所開發的圖表庫。官方地址：https://antv.alipay.com/g2/doc/index.html Github：https://github.com ...
jQ返回定位插件

一、jQuery 提供開發者開發插件的幾種模式 1.$.extend(); //這個方法是綁定在$上面的。可以通過$直接調用 2.$.fn.方法名 //這個方法是綁定在Dom對象上面的可以通過$('').方法名();調用 3.$.widget //通過jQuery UI 部件工廠模式創建。二、插件 ...