如何从现有图像Jquery，Css中绘制3D建筑结构？

Question

请访问此网站，它是由Flash制作的：我们可以通过jquery CSS做到吗？

Go here

然后单击标记为“发布”的任何建筑物您将看到一个悬停动画效果的建筑物。我想使用jQuery和CSS开发或者您可以建议发展

Answer 1

1. 首先，您需要知道这里没有3d。这些是预渲染的图像。您可以在软件中将这些突出显示的区域绘制为不同的层，例如photoshop。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8yd0QxTi5qcGcifQ==” alt =“在此处输入图像描述”>

2. 然后您需要创建一个可以检测鼠标悬停的区域。老式的image map html标记是执行此操作的一种方法。您将绘制一个覆盖与高光图像相同区域的多边形。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS85ZFJkYy5qcGcifQ==” alt =“在此处输入图像描述”>

结果将是这样的：

<map name="image-maps-2015-02-15-031753" id="ImageMapsCom-image-maps-2015-02-15-031753">
    <area alt="" href="#" title="" shape="poly" coords="52,99,101,49,172,21,267,21,317,93,302,127,268,63,194,73,129,89,74,115,49,132" style="outline:none;" target="_self" />
</map>

3. 最后，您需要一点JS来完成“ 如果鼠标悬停在该区域上，则显示突出显示的图像”。如果您使用的是jquery，则map上的mouseenter事件很容易做到这一点；

   $（'map'）。on（'mouseenter'，function（）{$（'＃highlight'）。show（）;}）

   $（'map'）。on（'mouseleave'，function（）{$（'＃highlight'）。hide（）;}）

---

全演示：http://jsfiddle.net/pggyq4t8/2/（悬停在顶层）

Answer 2

[2020年5月，在类似Question的回答中，我在Answer中向OP展示了如何改为使用SVG文件，以及如何对图像叠加层进行更多控制并使用仅CSS解决方案（[C0 ]和<a>上显示的一些演示文本）。我还使HTML页面能够完全响应以在各种设备上使用。

仅在此处发布代码段（进入“整页”以获得更好的外观。调整浏览器大小以测试响应能力：]

:hover

/*
    Visit below answers on Stackoverflow for an explanation
    of the math used for responsive sizing of elements.

    https://stackoverflow.com/a/62033317/2015909
    https://stackoverflow.com/a/61867702/2015909
*/
/**************************/
/* preferred global rules */
/**************************/
html,body               { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, *   { box-sizing: inherit }
body                    { margin: 0 }

/* responsive base font size using y = mx + b */
html    { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
body    { font-size: 1rem }

[band]  { display: flex; flex-flow: column wrap; align-content: center }

[padded="1"], [padded="0"] [band*="padded"] {
/*
    responsive page padding
    and responsive band padding (same as responsive page padding, but at band level)
    p1(320,32) p2(1920, 72) => 0.025x + 24
    p3(320, 8) p4(1920,320) => 0.195x - 54.4 

    'Band padding' is only active when 'page padding' is off 
*/
    padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}

/* Making sure the image fits in any viewport, either portrait or landscape */
@media (orientation: portrait ) { #construction-site { height: auto; width: 100% } }
@media (orientation: landscape) { #construction-site { height: 100%; width: auto } }
</style>