CSS3 matrix3d矩形到梯形轉換

我想使用webkit對CSS3 transform: matrix3d(<matrix>)的支持來創建「下降卡」效果。（對於這個輸出的唯一目標是鉻）CSS3 matrix3d矩形到梯形轉換

最終的效果應通過下面的4個階段過渡，並最終作爲只是一個水平線：

enter image description here

這裏是CSS我有現在：

#test { 
      margin: auto auto; 
      height: 200px; 
      width: 200px; 
      border:1px solid black; 
      background-color: lightblue; 
      -webkit-perspective: 1000; 
      -webkit-transform-origin: 50% 100%; 
      -webkit-transform-style: preserve-3d; 
      -webkit-animation-name: flip-card;   
      -webkit-animation-duration: 1s;   
      -webkit-animation-iteration-count: infinite;   
      -webkit-animation-timing-function: linear; 
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5); 
     } 
     @-webkit-keyframes flip-card { 
      0% {-webkit-transform: ;} 
      100% {-webkit-transform: 
         matrix3d(1, 0, 0, 0, 
           0, 1, 0, 0, 
           0, 0, 0, 0, 
           0, 0, 0.001, 1);} 
     }

和HTML是簡單的測試：

<body> 
    <div id="test">this div should fall forward...</div> 
</body>

上面的matrix3d基於讀取this SO question，但它會產生一個縮小的正方形，它會圍繞由初始框底部定義的x軸進行翻轉。

我明白，CSS 2d矩陣只能通過變換一個盒子來產生矩形和平行四邊形，而不規則形狀需要矩陣3d變換操作（this有助於刷新我的衰落線性代數！），但我似乎只能產生矩形和平行四邊形。

我環顧了一些標有matrix和transformation的SO問題。他們中的大多數不是基於CSS的，我無法獲得我想要的轉換。

來源

2011-02-10 beggs

我創建了CSS變換值擺弄的工具在這裏：http://www.duopixel.com/ stack/webkitmatrix /，但恐怕我無法用Chrome製作梯形圖。試一試。 – Duopixel 2011-02-10 14:00:13

@Duopixel：這是一個很棒的工具。我可以在Safari中製作一個梯形...但通過移動Row-1，Column4滑塊（右上滑塊）在Y軸上傾斜而不是在X軸上。在同一個滑塊創建平行四邊形的Chrome中。我的理解是，我應該移動Row-4，Column-3滑塊來創建X軸平行四邊形，但它在Safari或Chrome中不起作用。 – beggs 2011-02-11 06:02:25

這[CoffeeScript小提琴]（http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/#cp_embed_ifnqH）可能會有用。它嵌入的博客頁面也有一些有用的解釋。 – mbomb007 2015-10-20 19:20:34

-webkit-perspective在Chrome中不起作用（只是Safari），所以這不起作用（在Safari中試用你的代碼）。一般來說，Chrome中的3D轉換有點不確定，並且不能與梯度相結合。

另外rotate3d（1,0,0,90deg）的工作原理和矩陣一樣，可以完成你正在做的事情。矩陣符號只是將3D旋轉，傾斜，移動和原點組合成單個數組的簡短方式。由於你只是圍繞X軸旋轉，所以你不需要去這些長度。

webkit-transform: perspective(800) rotate3d(1, 0, 0, -90deg)

正是你所需要的。

更新：這裏是一個link to a jsfiddle與正是你正在尋找的，在這兩種Chrome和Safari的作品。請注意，重要的是要指定翻蓋的變換原點與透視的原點相同。 Webkit-perspective origin指定相對於任何3d變換的「相機」在三維空間中的位置，如果您不小心，很容易得到不直觀的結果。

月2日更新：的觀點是現在支持所有的邊緣瀏覽器（雖然Firefox的抗鋸齒有一點值得推薦的（並且需要-moz明顯））

3日更新：更新爲跨瀏覽器的小提琴Firefox，IE和前置前綴。

來源

2011-02-10 16:11:56

我在閱讀CSS轉換規範時發現border-width是動畫，並且您可以使用邊框寬度僞造梯形。這意味着你可以在Chrome，Opera和FF4中僞造掉卡片！

#stage { 
    margin-top: 200px; 
    position: relative; 
} 

#trapezoid { 
    position: absolute; 
    bottom: 0; 
    border: solid 1px #fff; 
    border-bottom: solid 200px #c00; 
    width: 200px; 
    -webkit-transition: all ease 1s; 

} 

#stage:hover #trapezoid { 
    border: solid 50px #fff; 
    border-bottom: solid 20px #f11; 
    width: 100px; 

}

當然，這有重大的注意事項：在你的榜樣卡正在下降向前，我試過，但似乎這是不可能使用這種技術。形狀內的任何內容都不會被轉換，只是卡的形狀。哦，卡的形狀不能有任何邊界。限制其實際應用的主要缺陷。

不過，它很酷！在這裏發揮它：http://jsfiddle.net/mxgAu/

來源

2011-02-18 06:28:31 Duopixel

如果您正在使用IE10，那麼解決方案可能是：

.up{ 
    -ms-transform-origin: 50% 100%; 
    -ms-transform: perspective(100px) rotateX(7deg); 
} 

.down{ 
    -ms-transform-origin: 50% 0%; 
    -ms-transform: perspective(100px) rotateX(-7deg) scale(1); 
}

來源

2012-02-21 13:59:58 frantisek

CSS3 matrix3d矩形到梯形轉換

回答

相關問題