JS，CSS，jQuery DIV 3D效果

我正在尋找一個特定的效果，但我不確定它叫什麼或我應該如何搜索它。JS，CSS，jQuery DIV 3D效果

基本上，我是在3D效果之後。我有一個DIV元素，我想它的行爲就像它放在一個球（它位於它的中心下方）。

所以當你將鼠標放在邊緣會縮小/放大的邊緣上。

有沒有人看過類似的東西？這完全可以實現嗎？

編輯：行爲in this example best describes what I was after但DIV不是文本。我想我可以根據我的需要調整這個例子。

對不起，如果我的描述過於籠統，我不知道如何描述我所需要的。

來源

2013-04-24 Mathew

你的意思就像一個雲，當你將鼠標放在元素上時，它就是放大？ – 2013-04-24 09:47:04

您能否添加更好的描述？無論如何看看https://github.com/hakimel/zoom.js也許它會幫助你開始;） – 2013-04-24 09:56:53

ower重新加載 - thanx你的時間。我編輯了原始問題，實際上找到了我想要的東西 – Mathew 2013-04-24 15:22:33

您可以使用CSS Transition進行此操作。使用css轉換可以爲div或對象設置動畫。

看看這個偉大的教程

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

一個例子：

JSFIDDLE

<body> 
    <p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p> 
    <div class="box"></div> 
</body> 

.box { 
    border-style: solid; 
    border-width: 1px; 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-color: #0000FF; 
    -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s; 
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s; 
    -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s; 
    transition:width 2s, height 2s, background-color 2s, transform 2s; 
} 
.box:hover { 
    background-color: #FFCCCC; 
    width:200px; 
    height:200px; 
    -moz-transform:rotate(180deg); 
    -webkit-transform:rotate(180deg); 
    -o-transform:rotate(180deg); 
    transform:rotate(180deg); 
}

希望這是你的意思。

來源

2013-04-24 09:54:14

非常感謝您的回覆。雖然這是一個非常酷的效果，但這並不是我所追求的。我試圖以某種方式實現深度效果。再次感謝！ – Mathew 2013-04-24 11:22:48

很高興我幫了一下。如果我的回答很有幫助，你可以接受它。如果你需要更多的信息，我也可以提供。 – 2013-04-24 11:54:06

你的回答不是我想要的，但不知何故，它使我到http://cubiq.org/dropbox/text3d.html這是我需要的變化。感謝名單。 – Mathew 2013-04-24 15:21:11

JS，CSS，jQuery DIV 3D效果

回答

相關問題