CSS3D動畫製作一個3d旋轉的篩子

-Advertisement-

希望這個demo能讓大家理解CSS3的3d空間動畫(其實是個假3D) 首先給一個3d的解剖圖，x/y/z軸線軸線已經標出下麵附上添加特效的動畫旋轉可以根據demo並參考上面解剖圖進行理解 ...

希望這個demo能讓大家理解CSS3的3d空間動畫(其實是個假3D)

首先給一個3d的解剖圖，x/y/z軸線軸線已經標出

下麵附上添加特效的動畫旋轉

可以根據demo並參考上面解剖圖進行理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            perspective: 1000px;
            transform-style: preserve-3d;
            
        }
        section{
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            animation: zhuan 16s infinite linear;
            
        }
        div{
            width: 300px;
            height: 300px;
            background-color: orange;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            position: absolute;   
            box-shadow: 0 0 300px green;
            opacity: 0.8;  
        }
        div:nth-child(1){
            transform: translateZ(300px);
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        div:nth-child(2){
            transform: rotateX(90deg) translateZ(300px);
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        div:nth-child(3){
            transform: rotateY(90deg) translateZ(300px);
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        div:nth-child(3) p:nth-child(2){
            align-self: center;
        }
        div:nth-child(3) p:nth-child(3){
            align-self: flex-end;
        }
        div:nth-child(4){
            transform: translateZ(-300px);
            flex-wrap: wrap;
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        div:nth-child(5){
            transform: rotateX(90deg) translateZ(-300px);
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        div:nth-child(6){
            transform: rotateY(90deg) translateZ(-300px);
            border-radius: 50%;
            box-shadow: 0 0 500px orange;
            opacity: 0.4;
        }
        .low{
            width: 300px;
            height: 150px;
            display: flex;
        }
        .low:nth-child(1){
            align-items: flex-end;
            justify-content: center; 
        }
        .low:nth-child(2){
            align-items: flex-start;
            justify-content: center;
        }
        .stree{
            width: 300px;
            height: 33.33%;
            display: flex;
        }
        .stree:nth-child(1){
            justify-content: space-around;
        }
        .stree:nth-child(2){
            justify-content: center;
        }
        .stree:nth-child(3){
            justify-content: space-around;
        }
        .fore{           
            width: 300px;
            height: 33.33%;
            display: flex;
        }
        .fore:nth-child(1){
            justify-content: center;
        }
        .fore:nth-child(3){
            justify-content: center;
        }
        p{
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 50%;
            box-shadow: 200 60 400px #ccc;
            opacity: 0.7;
            margin: 10px;
            
        }
        @keyframes zhuan{
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg) ;
            }
        }
      
    </style>
</head>
<body>  
    <section>
        <div>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div>
        <main class="low">
            <p></p>
            <p></p>
        </main>
        <main class="low">    
            <p></p>
            <p></p>
        </main>
        </div>
        <div>
        <main class="stree">
            <p></p>
            <p></p>
        </main>
        <main class="stree">    
            <p></p>
        </main>
        <main class="stree">
            <p></p>
            <p></p>
        </main>
        </div>
        <div>
            <main class="fore">
            <p></p>
                <p></p>
            </main>
            <main class="stree">    
                <p></p>
                <p></p>
            </main>
            <main class="fore">
                <p></p>
                <p></p>
            </main>
        </div>      
    </section>
</body>
</html>

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

-Advertisement-

更多相關文章

適配器和外觀模式

一、基本概述 1：現實中存在三角插頭適配成雙插頭，等其他各種形式的適配器來連接不相容的兩個物體。同理在代碼中也存在適配器模式來相容兩個不同的代碼介面。 2：KTV包間打開一個啟動開關，就打開party模式（音響、屏幕、燈光、換氣、點歌台等），一個簡單的開關來控制其他更多的任務。同理在代碼中也存在外 ...
js 原型原型鏈

個人的理解，有什麼不正確的請指教，共同學習 //stur不包含prototype屬性由上面的原型組成的鏈狀結構叫原型鏈 ...
銷毀react組件的方法

最近突然來了興緻研究react，在研究react的JSX語法，組件時，覺得沒有什麼問題，都挺好理解的，但是看到生命周期這一部分時，發現官網給出的聲明周期事件有一個怎麼都不能主動觸發到，後來在網上查了查，網上都只給出了聲明周期的概念，沒有人去真正測試過如何觸發React組件的銷毀。於是只能自己動手， ...
js jquery 正則去空字元

1.正則去空字元串； var str1=" a b c "; var strtrim=str1.replace(/\s/g,"");2.js去前後空字元串； var strtrim=str1.trim();3.jQuery去前後空字元串; var strtrim= $.trim(str1); ...
使用AJAX非同步提交表單的幾種方式

方式一手工收集所有的用戶輸入，封裝為大的“k1=v1&k2=v2…”鍵值對形式，使用$.post(url, data,fn)把數據提交給伺服器方式二方式三使用jQuery Form插件提供的ajaxSubmit()函數轉載：http://blog.csdn.net/NextStand/ar ...
HTML5+CSS （簡易nav設計）

HTML部分： <!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/moveCss.css" /> </head> <body> <nav id= ...
css 頁面特殊顯示效果

1.移動端最小設置字體為12px，如果想要更小字體效果： -webkit-transform:scale(0.9); 2.文字超過兩行時，末尾顯示點點的效果： overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box ...
jqGrid使用json實現的範例一

qGrid 是一個用來顯示網格數據的jQuery插件，通過使用jqGrid可以輕鬆實現前端頁面與後臺數據的ajax非同步通信。文檔比較全面，其官方網址為：http://www.trirand.com。 js引入前端html代碼 jqgrid javascript代碼 url引入的json格式如下通 ...