如何使圖像在懸停時向前傾斜

Question

我一直在玩整個早晨的過渡，並且在路障處。我需要在懸停時向前傾斜圖像。基本上我們有啤酒水龍頭，當他們盤旋時，他們希望它們傾斜，好像它們被拉下來一樣。我玩過一堆代碼，但現在沒有什麼東西可以在這裏發佈。如果任何人可以給如何在css3中做到這一點，它將不勝感激。

Answer 1

下面是一個基本版本（在safari & chrome中工作）。您可以使用透視值來改變效果。

我不知道你在哪裏遇到了麻煩，但這裏的關鍵點是：

• 容器，以便容納旋轉的元素，讓你用透視
• 的角度來改變整體看動畫的
• 變換原點設定圖像的旋轉點（使用在演示底部）
• rotateX於繞x軸旋轉 - 傾斜圖像朝向/遠離觀察者

HTML：

<div class="container"> 
    <img src="http://placekitten.com/200/300" width="200" height="300"></img> 
</div> 

CSS：

.container { 
    -webkit-perspective: 1000px; 
      perspective: 1000px; 
    margin: 2em; 
    transform-style: preserve-3d; 
} 

img { 
    transition: all .5s ease; 
    -webkit-transform: rotateX(0deg); 
    -webkit-transform-origin-y: 300px; /* rotates from the bottom of the image */ 
} 

img:hover { 
    -webkit-transform: rotateX(-40deg); 
} 

Demo jsFiddle

Answer 2

CSS支持X和Y三維旋轉，但不能在Z軸（向前和向後）純粹在CSS中旋轉，也許Javascript或jQuery可以這樣做。

更多關於CSS旋轉試圖在這裏就可以讀了：http://www.w3schools.com/css/css3_3dtransforms.asp

Answer 3

我會玩的東西，如CAMANJS或剛剛創建傾斜現有圖像的第二背景圖像和使用上懸停事件。