基於css3的3D立方體旋轉特效（先translate與先rotate的不同）

阿新 • • 發佈：2019-01-19

這裡寫圖片描述
3D變換基於幾個比較重要的屬性，perspective,translateZ,preserve-3d;
格式：
舞臺(perspective)
容器(3D, preserve-3d)
內容

3D實現立方體盒子：
這裡寫圖片描述

這裡寫圖片描述

transform的4個屬性，排序不同，帶來的效果也不同。
先移動的程式碼：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>3d</title>
    <style 
>
        *{padding: 0;margin: 0;}

        ul,li{list-style: none;}

        html{
            height: 100%;
            background: #ff0;
        }

        div{
            perspective: 1000px;
        }

        ul{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position 
: relative;
            transform-style: preserve-3d;
            font-size: 30px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            transform: rotateX(30deg) rotateY(30deg);
            animation: rotate 18s infinite linear; 
        }

        @keyframes 
 rotate{
            from{
                transform: rotateX(0deg) rotateY(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        ul li{
            width: 100%;
            height: 100%;
            position: absolute;
            border: 1px solid #fff;
            background: #333;
            opacity: 0.6;
        }

        ul .front{
            transform: translateZ(100px);
        }

        ul .back{
            transform:translateZ(-100px)  rotateY(180deg);
        }

        ul .left{
            transform: translateX(-100px) rotateY(-90deg) ;
        }

        ul .right{
            transform:translateX(100px)  rotateY(90deg) ;
        }

        ul .top{
            transform: translateY(-100px) rotateX(90deg) ;
        }

        ul .bottom{
            transform: translateY(100px) rotateX(-90deg) ;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="front">前</li>
            <li class="back">後</li>
            <li class="left">左</li>
            <li class="right">右</li>
            <li class="top">上</li>
            <li class="bottom">下</li>
        </ul>
    </div>
</body>
</html>

先旋轉後移動，座標軸改變方向。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>3d</title>
    <style>
        *{padding: 0;margin: 0;}

        ul,li{list-style: none;}

        html{
            height: 100%;
            background: #ff0;
        }

        div{
            perspective: 1000px;
        }

        ul{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            font-size: 30px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            transform: rotateX(30deg) rotateY(30deg);
            animation: rotate 18s infinite linear; 
        }

        @keyframes rotate{
            from{
                transform: rotateX(0deg) rotateY(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        ul li{
            width: 100%;
            height: 100%;
            position: absolute;
            border: 1px solid #fff;
            background: #333;
            opacity: 0.6;
        }

        .front{
            transform: translateZ(100px);
        }

        .back{
              transform:rotateY(180deg) translateZ(100px);
        }

        .left{
            transform: rotateY(-90deg) translateZ(100px);
        }

        .right{
            transform:rotateY(90deg) translateZ(100px);
        }

        .top{
            transform: rotateX(90deg) translateZ(100px)  ;
        }

        .bottom{
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="front">前</li>
            <li class="back">後</li>
            <li class="left">左</li>
            <li class="right">右</li>
            <li class="top">上</li>
            <li class="bottom">下</li>
        </ul>
    </div>
</body>
</html>

基於css3的3D立方體旋轉特效（先translate與先rotate的不同）

3D變換基於幾個比較重要的屬性，perspective,translateZ,preserve-3d; 格式：舞臺(perspective) 容器(3D, preserve-3d) 內容 3D實現立方體盒子： transform的4

寒假作業（一）配置基於接口劃分VLAN（靜態配置鏈路類型）

接口基於 watermark 交換用戶 .com lin 中繼鏈路 ip地址一、拓撲圖二、組網需求1.如上圖所示，某企業的交換機連接有很多用戶，且相同業務用戶通過不同的設備接入企業網絡。2.為了通信的安全性，同時為了避免廣播風暴，企業希望業務相同用戶之間可以互相訪問，

【python練習】基於socket的FTP程序（僅支持單用戶）

查看切換目錄 md5加密查看當前目錄傳輸 conf 存儲 settings ces 程序功能：本程序模擬實現了一個FTP程序： 1.程序分為客戶端和服務端 2.用戶可以登錄和註冊賬號，登錄密碼有MD5加密 3.每個用戶有自己的家目錄，且只能訪問自己的家目錄 4.用

二叉樹先序遍歷（遞迴與非遞迴）及C語言實現

二叉樹先序遍歷的實現思想是：訪問根節點；訪問當前節點的左子樹；若當前節點無左子樹，則訪問當前節點的右子樹；圖 1 二叉樹以圖 1 為例，採用先序遍歷的思想遍歷該二叉樹的過程為：訪問該二叉樹的根節點，找到 1；訪問節點 1 的左子樹，找到節點 2；訪問節點 2 的左子

SpringMVC基於程式碼的配置方式（零配置，無web.xml）

基於配置檔案的web專案維護起來可能會更方便，但是有時候我們會有一些特殊的需求，比如防止客戶胡亂更改配置，這時候我們需要給配置隱藏到程式碼中。 1.建立一個動態web專案（無需web.xml） 2.右鍵專案新增幾個package: com.easyweb.c

新聞推薦系統：基於內容的推薦演算法（Recommender System：Content-based Recommendation）

2018/10/04更新這篇文章似乎被越來越多的小夥伴看到了，所以覺得有必要做一些進一步的詳細說明。首先按照本文所講解的推薦思路進行新聞推薦的推薦系統，我已經實現並已經放在Github上了。歡迎小夥伴們積極star和fork，更歡迎隨時提建議，我們一起交

GC演算法精解（複製演算法與標記/整理演算法）目前的兩種主流演算法，基於標記清除演算法而來

refer to http://www.cnblogs.com/zuoxiaolong/p/jvm5.html 在說以下兩種演算法前，說說他們的進化源——標記清除有什麼問題。第二點尤甚 1、首先，它的缺點就是效率比較低（遞迴與全堆物件遍歷），而且在進行GC的時候

基於內容的影象檢索（顏色，直方圖相交法，）java實現程式碼

直方圖特徵：對顏色特徵的表達方式有許多種，我們採用直方圖進行特徵描述。常見的直方圖有兩種：統計直方圖，累積直方圖。我們將分別實驗兩種直方圖在影象聚類和檢索中的效能。 l統計直方圖為利用影象的特徵描述影象，可藉助特徵的統計直方圖。影象特

2017-9-23C#筆記（類的索引，事件，運算符，this訪問器，派生，分部類，抽象類，封閉類，靜態類，類與結構的不同）

追溯 {} 矩形 bst 關鍵字特定類對象 direct 派生類的構造函數 1.類的索引索引是一組get和set鋒訪問器,支持按照飲用數組元素的方法來引用對象.索引通常便是多個數據成員,並且它總是以雷類的事例成員的方式存在.聲明索引的方法: 返回類型 this

JSP6（JSP 指令與JSP 動作元素）

value 用戶 page指令 font 數據庫定義 err ebe pan 一．JSP指令用來設置整個JSP頁面相關的屬性指令可以有很多個屬性，它們以鍵值對的形式存在，並用逗號隔開。 JSP中的三種指令標簽： Page指令 Page指令為容器提供當前頁面的使用說明。

# 大型網絡構建-OSPF詳解二（特殊區域與虛鏈路）

大型網絡構建大型網絡構建-OSPF詳解二（特殊區域與虛鏈路）什麽是ospf？ OSPF(Open Shortest Path First開放式最短路徑優先）是一個內部網關協議(Interior Gateway Protocol，簡稱IGP），用於在單一自治系統（autonom

信息資產分級管理的具體方法（風險評估與風險管理的）朋友可以看看

信息資產分級管理信息資產分級管理1. 信息資產分類鑒別達到及維護組織資產的適當保護，宜明確識別所有資產，並制作與維持所有重要資產的清冊，與信息處理設施相關的所有信息及資產宜由組織指定擁有者。與信息處理設施相關的信息與資產，其可被接受的使用之規則宜予以識別、文件化及實作。各單位負責信息資產應定期更新與維護信息

樹的前、中、後序遍歷演算法（遞迴與非遞迴）、層序遍歷

二叉樹層次遍歷非遞迴 void LevelOrder(Tree* T) { if(T == nullptr) return ; queue<Tree *> myqueue; myqueue.push(T); while(!myqueu

斐波那契（遞迴與非遞迴）

遞迴 long jumpFloor(int number) { if(number <= 0) return 0; else if(number == 1 ) return 1; return jumpFloor(number-1)

斐波那契數列（遞迴與非遞迴）

#include <bits/stdc++.h> using namespace std; typedef long long ll; const int MAXN = 1e2+10; ll a[MAXN]; ll F[MAXN]; ll f(ll n) ///遞迴 { if

n的階乘（遞迴與非遞迴）

#include <bits/stdc++.h> using namespace std; typedef long long ll; ll f(ll n)///遞迴演算法 { if(n==0 || n==1) return 1; else return n * f

Tomcat效能調優以及遠端管理（Tomcat manager與psi-probe監控）

tomcat優化的我用到的幾個點： 1.記憶體優化 2.執行緒優化 docs/config/http.html maxConnections acceptCount（配置的太大是沒有意義的） maxThreads minSpareThreads 最小空閒的工作

劍指offer——不用加減乘除做加法（按位與和異或）

class Solution { public: int Add(int num1, int num2) { while(num2 != 0){//若需要進位 int sum = num1 ^ num2;//異或，01=1，00=0，11=

Java面向物件之多型（向上轉型與向下轉型）

多型，大概每個人都知道。但是，又有幾個人真的理解什麼是多型、多型有哪些細節呢？如果你看到這篇文章的名字，腦海中對多型沒有一個清晰的概念，不妨點進來看看，也許會有收穫。什麼是多型簡單的理解多型多型，簡而言之就是同一個行為具有多個不同表現形式或形態的能力。比如說，有一杯水，我不知道

C++（建構函式與解構函式）

C++（建構函式與解構函式） 1. 建構函式用於對類的物件的初始化，建構函式名與類名相同。可在類內直接定義，也可在類內宣告類外定義（定義時在函式名前加類名::）。建構函式無返回值型別。 class C { public: C(int a,int b);//類

基於css3的3D立方體旋轉特效 （先translate與先rotate的不同）

相關推薦

基於css3的3D立方體旋轉特效（先translate與先rotate的不同）