css 3D正方體和旋轉木馬效果

阿新 • • 發佈：2018-11-09

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style media="screen">

      .colorTable {
        position: relative;
        margin: 0 auto;
        margin-top: 100px;
        height: 200px;
        width: 200px;
        animation: roll 10s ease infinite;
        transform-style: preserve-3d;
      }

      .yellow , .green , .pink , .blue , .grey , .orange {
        position: absolute;
        height: 100px;
        width: 100px;
      }

      .yellow {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: rotateY(90deg) translateZ(-50px);
      }

      .green{
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: rotateY(90deg) translateZ(50px);
      }

      .pink {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: rotateX(90deg) translateZ(-50px);
      }

      .grey {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: rotateX(90deg) translateZ(50px)
      }

      .blue {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: translateZ(50px);
      }

      .orange {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: translateZ(-50px)
      }

      @keyframes roll {
        10% , 20% {
          transform: rotateX(111deg) rotateY(94deg) rotateZ(43deg);
        }

        30% , 40% {
          transform: rotateX(135deg) rotateY(133deg) rotateZ(128deg);
        }

        50% , 60% {
          transform: rotateX(200deg) rotateY(201deg) rotateZ(198deg);
        }

        70% , 80% {
          transform: rotateX(256deg) rotateY(277deg) rotateZ(298deg);
        }

        90% , 100% {
          transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
      }

      .colorTable1 {
        position: relative;
        margin: 0 auto;
        margin-top: 100px;
        height: 200px;
        width: 200px;
        animation: roll1 10s ease infinite;
        transform-style: preserve-3d;
      }

      .yellow1 , .green1 , .pink1 , .blue1 , .grey1 , .orange1 {
        position: absolute;
        height: 100px;
        width: 200px;
      }

      .yellow1 {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: rotateY(-45deg) translateZ(300px);
      }

      .green1 {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: rotateY(45deg) translateZ(300px);
      }

      .pink1 {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: rotateY(45deg) translateZ(-300px);
      }

      .grey1 {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: rotateY(-45deg) translateZ(-300px)
      }

      .blue1 {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: translateZ(300px);
      }

      .orange1 {
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538991267424&di=47253d29460cfdfe30b03879499fdbf8&imgtype=0&src=http%3A%2F%2Fattach10.92wy.com%2Fimages%2F2011%2F0324%2F13009393943ce64513.jpg) ;
        background-size: 100% 100%;
        transform: translateZ(-300px)
      }

      @keyframes roll1 {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotateY(360deg);
        }
      }
    </style>
</head>
<body>

    <div class="colorTable">
      <div class="yellow"></div>
      <div class="green"></div>
      <div class="pink"></div>
      <div class="grey"></div>
      <div class="blue"></div>
      <div class="orange"></div>
    </div>

    <div class="colorTable1">
      <div class="yellow1"></div>
      <div class="green1"></div>
      <div class="pink1"></div>
      <div class="grey1"></div>
      <div class="blue1"></div>
      <div class="orange1"></div>
    </div>
   

</body>

</html>

正方體模組，以及旋轉木馬模組，可以用這種效果做多種輪播圖

css 3D正方體和旋轉木馬效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style media="sc

CSS實現3D正方體動態旋轉效果【原始碼+GIF圖】

小夥伴們看到那些頁面上炫酷的正方體，是不是都覺得美美的很精緻，很想自己動手寫一個屬於自己的，但是又學業繁忙而找不到時間去實現，今天我就為大家寫一個，噠噠噠，廢話不多說，開始上程式碼~ 額，要不先說說它的實現原理吧，方便理解，嘿嘿。實現原理：transition-proper

手機端3d旋轉木馬效果+保存圖片到本地

偏移旋轉木馬 ndb AC fun AI tee com select <!DOCTYPE html> <html> <head> <title></title> <meta charse

CSS-3D正方體旋轉

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D旋轉正方體</title> <style type="text/css"> body{

類似旋轉木馬效果的converflow，3D視覺效果

private void transformImageBitmap(ImageView child, Transformation t, int rotationAngle) { mCamera.save(); final Matrix imageM

HTML5 CSS3 專題：誘人的例項 3D旋轉木馬效果相簿

首先說明一下創意的出處：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html（張鑫旭的部落格），對前臺感興趣的可以沒事去看看他的部落格，很給力~這篇部落格的目的是因為上篇HTML5 CSS3專題

JQuery——banner旋轉木馬效果

pict bsp 比例 index containe flag ttr nbsp alt 博主在瀏覽網頁時無意間發現了一種banner圖的輪播方式——像旋轉木馬一樣的輪播方式，博主感覺非常新穎獨特，經過查閱資料，觀看某課網教程總算搞了出來的，其原理主要利用了JQuery代碼

【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider

pad 語句 borde nbsp strong 調用 define ide right 實現效果：實現原理：技術棧: javascript+jQuery+html+css 實現步驟： // 0. 獲取元素 // 1. 鼠標放置到輪播圖上，顯示兩側的

transform復習之圖片的旋轉木馬效果

tex his log eight rspec 版本旋轉木馬 image lis 效果示意圖 <!DOCTYPE><html><head><meta http-equiv="Content-Type" content="te

CSS文字樣式和CSS3文字效果以及背景

CSS文字樣式 text-indent屬性 text-indent屬性可以為特定選項的文字進行首行縮排，取值可以是長度值或百分比，它的屬性值通常使用em作為單位，text-indent: 2em

OpenGL學習程式，建立一個3D的三角椎體和正方體並旋轉

近日看了兩個OpenGL ES的程式，看的雲裡霧裡的，意識到OpenGL ES是OpenGL的一個方面，所以任務學習OpenGL還是很有必要的，發現一個非常不錯的學習網站，這裡推薦給大家：http://www.owlei.com/DancingWind/Course/Tut

OpenGL ES平移矩陣和旋轉矩陣的左乘與右乘效果

角度 style 位置作用 span 坐標系 rotate 不同的世界 OpenGL ES平移矩陣和旋轉矩陣的左乘與右乘在OpenGL 、OpenGL ES中矩陣起著舉足輕重的作用，而矩陣之間的左乘與右乘在效果上是不同的。一、先平移後旋轉場景效果：人繞樹旋轉。原

使用 CSS overscroll-behavior 控制滾動行為：自定義下拉刷新和溢出效果

pull str 新的 title contain 下拉刷新介紹 select data CSS 的新屬性 overscroll-behavior 允許開發者覆蓋默認的瀏覽器滾動行為，一般用在滾動到頂部或者底部。背景滾動邊界和滾動鏈接（boundary & c

圖片新增CSS濾鏡和SVG濾鏡實現模糊陰影等效果

CSS濾鏡什麼是CSS濾鏡 CSS濾鏡（filter）屬提供的圖形特效，像模糊，銳化或元素變色。過濾器通常被用於調整圖片，背景和邊界的渲染。簡而言之，就是在CSS中提供了一些已經預定義的屬性或函式，實現影象的模糊、變色等效果。函式 blur() 給影象

旋轉木馬案例—陣列和動畫的聯合應用

要點： 1.這個例子中的陣列操作的四個方法，都是在進行運算之後，都有返回值，而這些返回值有所不同。執行刪除相關的操作時，返回的是被刪除的值，而追加到陣列物件中，返回的是被操作後的整個陣列。 2.關鍵點是，在點選切換按鈕後，原來圖片陣列對應的圖片發生了改變，但是通過js獲取

Codrops 優秀教程：CSS 3D Transforms 實現書本效果

　　這個使用 CSS 3D Transforms 實現創意書本效果的來自 Codrops 網站。你可以看到兩種型別的書設計：精裝書和平裝書。這兩個效果都可以很容易地使用 CSS 修改。趕緊體驗一下吧。您可能感興趣的相關文章原始碼下載　　效果演示

CSS 相容IE8的線性漸變和旋轉

因IE8不相容CSS3旋轉和漸變的屬性，改用filter實現漸變以下效果為橫向漸變，從左到右，加了透明度filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0 finishopacity=50 style=1 sta

CSS遮罩 mask/masks 的應用和實現鏤空效果

在過去，CSS mask屬性在使用的時候就是mask: xxx，但是現在隨著這個屬性的規範化，mask屬性實際上已經成為了諸多mask-*的縮寫，這和background, border性質是一樣的。具體是哪些屬性的縮寫呢，可以參見下面的列表： mask-imag

OpenGL_Qt學習筆記之_04(3D圖形的繪製和旋轉)

繪製四稜錐四稜錐由5個面構成一個封閉的立體圖,其中4個共頂點的側面是三角形,底面是個四邊形。如果我們要繪製一個3D的四稜錐只需要繪製這5個面即可，繪製的方法和前一篇文章OpenGL_Qt學習筆記之_03(平面圖形的著色和旋轉)的相同。只不過這裡的頂點座標是3維的，所以影象深度那一維不

Android 3D旋轉動畫效果

這篇文章主要介紹一下如何實現View的3D旋轉效果，實現的主要原理就是圍繞Y軸旋轉，同時在Z軸方面上有一個深入的縮放。演示的demo主要有以下幾個重點： 1，自定義旋轉動畫 2，動畫做完後，重置ImageView 先看一下程式的執行效果：

css 3D正方體 和旋轉木馬效果

相關推薦

css 3D正方體和旋轉木馬效果