JS,CSS,jQuery DIV 3D effect

JS,CSS,jQuery DIV 3D effect

本文关键字：3D effect DIV jQuery CSS JS      更新时间：2023-09-26

我正在寻找一个特定的效果，但我不确定它叫什么或我应该如何搜索它。

基本上，我想要一个3D效果。我有一个DIV元素，我希望它的行为就像它被放置在一个球(它位于它的中心以下)。

当你把鼠标移到边缘上时，边缘会缩小/缩小

有人见过类似的东西吗?这是可以实现的吗?

编辑:在这个例子中的行为最好地描述了我所追求的，但与div不是文本。我想我可以根据我的需要调整这个例子。

如果我的描述太笼统了，我很抱歉，我不知道如何描述我需要的东西。

你可以使用CSS过渡。使用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);
}

希望这是你的意思。

相关文章：