我这个布局是准备在中间放一张图片，两边的便签在图片的左右两边区域动。
中间图片自己放，每个标签鼠标放上去会放大并停止。效果如下：
3d云标签
注意：标签样式可以自行修改，tagcloud参数配置中，如果有的标签在区域内边界会被遮住，就通过radius和direction调节即可。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>3d云标签</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<script type="text/javascript" src="js/tagcloud.js"></script>
</head>
<body>
<div class="dynamicBox">
<div class="leftTag">
<div class="tagcloud fl tagcloudOne" style="visibility: visible; position: relative;">
<a href="#">喜出望外</a>
<a href="#">欣喜若狂、皆大欢喜</a>
<a href="#">喜气洋洋</a>
<a href="#">笑逐颜开、心花怒放</a>
<a href="#">眉飞色舞</a>
<a href="#">眉开眼笑</a>
<a href="#">手舞足蹈</a>
<a href="#">喜上眉梢</a>
<a href="#">心满意足</a>
</div>
</div>
<div class="midPic">
<img src="./img/td.png" alt="">
</div>
<div class="rightTag">
<div class="tagcloud fr tagcloudTwo"
style="visibility: visible; position: relative; min-height: 240px; min-width: 500px;">
<a href="#">心旷神怡</a>
<a href="#">欢天喜地</a>
<a href="#">怡然自得</a>
<a href="#">神采飞扬</a>
<a href="#">扬眉吐气</a>
<a href="#">欢呼雀跃</a>
<a href="#">抚掌大笑</a>
<a href="#">兴高采烈</a>
<a href="#">喜形于色</a>
</div>
</div>
</div>
<script>
/*3D标签云*/
tagcloud({
selector: ".tagcloud", //元素选择器
fontsize: 17, //基本字体大小, 单位px
radius: 135, //滚动半径, 单位px
mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast
ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast
direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
});
</script>
</body>
</html>
2.index.css
.dynamicBox{
position: relative;
width: 100%;
height: 550px;
display: flex;
justify-content: space-between;
margin-top:20px;
}
/* 3d动画 */
.tagcloud { position: relative; margin-top:-150px; }
.tagcloud a{ position: absolute; top: 0; left: 0; display: block; padding: 6px 10px; color: #577BA4; font-size: 14px; border-radius: 18px; background: linear-gradient(90deg,#C1D7F1,#E9F1F8); text-decoration: none; white-space: nowrap;
-o-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-ms-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-moz-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-webkit-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135, Color='#000000')";/*兼容ie7/8*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=9);
/*strength是阴影大小，direction是阴影方位，单位为度，可以为负数，color是阴影颜色 （尽量使用数字）使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示（block或inline-block;）*/
}
.tagcloud a{
height: 50px;
line-height: 50px;
border-radius: 8px;
}
.tagcloud a:hover{ color: #3385cf; }
.rightTag,.leftTag{
width: 65%;
height: 100%;
overflow:hidden;
position: relative;
}
.rightTag{
right: 65px;
}
.leftTag{
left: 65px;
}
.tagcloudOne{
min-height: 100%!important;
min-width: 100%!important;
margin-left: -60px;
top: 112px;
}
.tagcloudTwo{
min-height: 100%!important;
min-width: 100%!important;
top: 112px;
}