纯css+div实现三维商店点击旋转效果
代码语言：html
所属分类：三维
代码描述：纯css+div实现三维商店点击旋转效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700");
body {
background-color: #e2e2e2;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
perspective: 75vmin;
}
.control {
width: 4.7619047619vw;
height: 4.7619047619vh;
position: absolute;
z-index: 1;
transform: translateZ(1px);
}
.control[data-x="0"][data-y="0"] {
top: 0vh;
left: 0vw;
}
.control[data-x="0"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="0"] {
top: 0vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="0"] {
top: 0vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="0"] {
top: 0vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="0"] {
top: 0vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="0"] {
top: 0vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="0"] {
top: 0vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="0"] {
top: 0vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="0"] {
top: 0vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="0"] {
top: 0vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="0"] {
top: 0vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(0deg);
}
.control[data-x="11"][data-y="0"] {
top: 0vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(18deg);
}
.control[data-x="12"][data-y="0"] {
top: 0vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(36deg);
}
.control[data-x="13"][data-y="0"] {
top: 0vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(54deg);
}
.control[data-x="14"][data-y="0"] {
top: 0vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(72deg);
}
.control[data-x="15"][data-y="0"] {
top: 0vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(90deg);
}
.control[data-x="16"][data-y="0"] {
top: 0vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(108deg);
}
.control[data-x="17"][data-y="0"] {
top: 0vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(126deg);
}
.control[data-x="18"][data-y="0"] {
top: 0vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(144deg);
}
.control[data-x="19"][data-y="0"] {
top: 0vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(162deg);
}
.control[data-x="20"][data-y="0"] {
top: 0vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="0"]:hover ~ .icon-store {
transform: rotateX(-180deg) rotateY(180deg);
}
.control[data-x="0"][data-y="1"] {
top: 4.7619047619vh;
left: 0vw;
}
.control[data-x="0"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="1"] {
top: 4.7619047619vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="1"] {
top: 4.7619047619vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="1"] {
top: 4.7619047619vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="1"] {
top: 4.7619047619vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="1"] {
top: 4.7619047619vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="1"] {
top: 4.7619047619vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="1"] {
top: 4.7619047619vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="1"] {
top: 4.7619047619vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="1"] {
top: 4.7619047619vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="1"] {
top: 4.7619047619vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(0deg);
}
.control[data-x="11"][data-y="1"] {
top: 4.7619047619vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(18deg);
}
.control[data-x="12"][data-y="1"] {
top: 4.7619047619vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(36deg);
}
.control[data-x="13"][data-y="1"] {
top: 4.7619047619vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(54deg);
}
.control[data-x="14"][data-y="1"] {
top: 4.7619047619vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(72deg);
}
.control[data-x="15"][data-y="1"] {
top: 4.7619047619vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(90deg);
}
.control[data-x="16"][data-y="1"] {
top: 4.7619047619vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(108deg);
}
.control[data-x="17"][data-y="1"] {
top: 4.7619047619vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(126deg);
}
.control[data-x="18"][data-y="1"] {
top: 4.7619047619vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(144deg);
}
.control[data-x="19"][data-y="1"] {
top: 4.7619047619vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(162deg);
}
.control[data-x="20"][data-y="1"] {
top: 4.7619047619vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="1"]:hover ~ .icon-store {
transform: rotateX(-162deg) rotateY(180deg);
}
.control[data-x="0"][data-y="2"] {
top: 9.5238095238vh;
left: 0vw;
}
.control[data-x="0"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="2"] {
top: 9.5238095238vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="2"] {
top: 9.5238095238vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="2"] {
top: 9.5238095238vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="2"] {
top: 9.5238095238vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="2"] {
top: 9.5238095238vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="2"] {
top: 9.5238095238vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="2"] {
top: 9.5238095238vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="2"] {
top: 9.5238095238vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="2"] {
top: 9.5238095238vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="2"] {
top: 9.5238095238vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(0deg);
}
.control[data-x="11"][data-y="2"] {
top: 9.5238095238vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(18deg);
}
.control[data-x="12"][data-y="2"] {
top: 9.5238095238vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(36deg);
}
.control[data-x="13"][data-y="2"] {
top: 9.5238095238vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(54deg);
}
.control[data-x="14"][data-y="2"] {
top: 9.5238095238vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(72deg);
}
.control[data-x="15"][data-y="2"] {
top: 9.5238095238vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(90deg);
}
.control[data-x="16"][data-y="2"] {
top: 9.5238095238vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(108deg);
}
.control[data-x="17"][data-y="2"] {
top: 9.5238095238vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(126deg);
}
.control[data-x="18"][data-y="2"] {
top: 9.5238095238vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(144deg);
}
.control[data-x="19"][data-y="2"] {
top: 9.5238095238vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(162deg);
}
.control[data-x="20"][data-y="2"] {
top: 9.5238095238vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="2"]:hover ~ .icon-store {
transform: rotateX(-144deg) rotateY(180deg);
}
.control[data-x="0"][data-y="3"] {
top: 14.2857142857vh;
left: 0vw;
}
.control[data-x="0"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="3"] {
top: 14.2857142857vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="3"] {
top: 14.2857142857vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="3"] {
top: 14.2857142857vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="3"] {
top: 14.2857142857vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="3"] {
top: 14.2857142857vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="3"] {
top: 14.2857142857vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="3"] {
top: 14.2857142857vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="3"] {
top: 14.2857142857vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="3"] {
top: 14.2857142857vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="3"] {
top: 14.2857142857vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(0deg);
}
.control[data-x="11"][data-y="3"] {
top: 14.2857142857vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(18deg);
}
.control[data-x="12"][data-y="3"] {
top: 14.2857142857vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(36deg);
}
.control[data-x="13"][data-y="3"] {
top: 14.2857142857vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(54deg);
}
.control[data-x="14"][data-y="3"] {
top: 14.2857142857vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(72deg);
}
.control[data-x="15"][data-y="3"] {
top: 14.2857142857vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(90deg);
}
.control[data-x="16"][data-y="3"] {
top: 14.2857142857vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(108deg);
}
.control[data-x="17"][data-y="3"] {
top: 14.2857142857vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(126deg);
}
.control[data-x="18"][data-y="3"] {
top: 14.2857142857vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(144deg);
}
.control[data-x="19"][data-y="3"] {
top: 14.2857142857vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(162deg);
}
.control[data-x="20"][data-y="3"] {
top: 14.2857142857vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="3"]:hover ~ .icon-store {
transform: rotateX(-126deg) rotateY(180deg);
}
.control[data-x="0"][data-y="4"] {
top: 19.0476190476vh;
left: 0vw;
}
.control[data-x="0"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="4"] {
top: 19.0476190476vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="4"] {
top: 19.0476190476vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="4"] {
top: 19.0476190476vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="4"] {
top: 19.0476190476vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="4"] {
top: 19.0476190476vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="4"] {
top: 19.0476190476vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="4"] {
top: 19.0476190476vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="4"] {
top: 19.0476190476vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="4"] {
top: 19.0476190476vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="4"] {
top: 19.0476190476vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(0deg);
}
.control[data-x="11"][data-y="4"] {
top: 19.0476190476vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(18deg);
}
.control[data-x="12"][data-y="4"] {
top: 19.0476190476vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(36deg);
}
.control[data-x="13"][data-y="4"] {
top: 19.0476190476vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(54deg);
}
.control[data-x="14"][data-y="4"] {
top: 19.0476190476vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(72deg);
}
.control[data-x="15"][data-y="4"] {
top: 19.0476190476vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(90deg);
}
.control[data-x="16"][data-y="4"] {
top: 19.0476190476vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(108deg);
}
.control[data-x="17"][data-y="4"] {
top: 19.0476190476vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(126deg);
}
.control[data-x="18"][data-y="4"] {
top: 19.0476190476vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(144deg);
}
.control[data-x="19"][data-y="4"] {
top: 19.0476190476vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(162deg);
}
.control[data-x="20"][data-y="4"] {
top: 19.0476190476vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="4"]:hover ~ .icon-store {
transform: rotateX(-108deg) rotateY(180deg);
}
.control[data-x="0"][data-y="5"] {
top: 23.8095238095vh;
left: 0vw;
}
.control[data-x="0"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="5"] {
top: 23.8095238095vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="5"] {
top: 23.8095238095vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="5"] {
top: 23.8095238095vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="5"] {
top: 23.8095238095vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="5"] {
top: 23.8095238095vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="5"] {
top: 23.8095238095vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="5"] {
top: 23.8095238095vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="5"] {
top: 23.8095238095vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="5"] {
top: 23.8095238095vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="5"] {
top: 23.8095238095vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(0deg);
}
.control[data-x="11"][data-y="5"] {
top: 23.8095238095vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(18deg);
}
.control[data-x="12"][data-y="5"] {
top: 23.8095238095vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(36deg);
}
.control[data-x="13"][data-y="5"] {
top: 23.8095238095vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(54deg);
}
.control[data-x="14"][data-y="5"] {
top: 23.8095238095vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(72deg);
}
.control[data-x="15"][data-y="5"] {
top: 23.8095238095vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(90deg);
}
.control[data-x="16"][data-y="5"] {
top: 23.8095238095vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(108deg);
}
.control[data-x="17"][data-y="5"] {
top: 23.8095238095vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(126deg);
}
.control[data-x="18"][data-y="5"] {
top: 23.8095238095vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(144deg);
}
.control[data-x="19"][data-y="5"] {
top: 23.8095238095vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(162deg);
}
.control[data-x="20"][data-y="5"] {
top: 23.8095238095vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="5"]:hover ~ .icon-store {
transform: rotateX(-90deg) rotateY(180deg);
}
.control[data-x="0"][data-y="6"] {
top: 28.5714285714vh;
left: 0vw;
}
.control[data-x="0"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="6"] {
top: 28.5714285714vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="6"] {
top: 28.5714285714vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="6"] {
top: 28.5714285714vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="6"] {
top: 28.5714285714vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="6"] {
top: 28.5714285714vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="6"] {
top: 28.5714285714vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="6"] {
top: 28.5714285714vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="6"] {
top: 28.5714285714vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="6"] {
top: 28.5714285714vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="6"] {
top: 28.5714285714vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(0deg);
}
.control[data-x="11"][data-y="6"] {
top: 28.5714285714vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(18deg);
}
.control[data-x="12"][data-y="6"] {
top: 28.5714285714vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(36deg);
}
.control[data-x="13"][data-y="6"] {
top: 28.5714285714vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(54deg);
}
.control[data-x="14"][data-y="6"] {
top: 28.5714285714vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(72deg);
}
.control[data-x="15"][data-y="6"] {
top: 28.5714285714vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(90deg);
}
.control[data-x="16"][data-y="6"] {
top: 28.5714285714vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(108deg);
}
.control[data-x="17"][data-y="6"] {
top: 28.5714285714vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(126deg);
}
.control[data-x="18"][data-y="6"] {
top: 28.5714285714vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(144deg);
}
.control[data-x="19"][data-y="6"] {
top: 28.5714285714vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(162deg);
}
.control[data-x="20"][data-y="6"] {
top: 28.5714285714vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="6"]:hover ~ .icon-store {
transform: rotateX(-72deg) rotateY(180deg);
}
.control[data-x="0"][data-y="7"] {
top: 33.3333333333vh;
left: 0vw;
}
.control[data-x="0"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="7"] {
top: 33.3333333333vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="7"] {
top: 33.3333333333vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="7"] {
top: 33.3333333333vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="7"] {
top: 33.3333333333vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="7"] {
top: 33.3333333333vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="7"] {
top: 33.3333333333vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="7"] {
top: 33.3333333333vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="7"] {
top: 33.3333333333vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="7"] {
top: 33.3333333333vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="7"] {
top: 33.3333333333vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(0deg);
}
.control[data-x="11"][data-y="7"] {
top: 33.3333333333vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(18deg);
}
.control[data-x="12"][data-y="7"] {
top: 33.3333333333vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(36deg);
}
.control[data-x="13"][data-y="7"] {
top: 33.3333333333vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(54deg);
}
.control[data-x="14"][data-y="7"] {
top: 33.3333333333vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(72deg);
}
.control[data-x="15"][data-y="7"] {
top: 33.3333333333vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(90deg);
}
.control[data-x="16"][data-y="7"] {
top: 33.3333333333vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(108deg);
}
.control[data-x="17"][data-y="7"] {
top: 33.3333333333vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(126deg);
}
.control[data-x="18"][data-y="7"] {
top: 33.3333333333vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(144deg);
}
.control[data-x="19"][data-y="7"] {
top: 33.3333333333vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(162deg);
}
.control[data-x="20"][data-y="7"] {
top: 33.3333333333vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="7"]:hover ~ .icon-store {
transform: rotateX(-54deg) rotateY(180deg);
}
.control[data-x="0"][data-y="8"] {
top: 38.0952380952vh;
left: 0vw;
}
.control[data-x="0"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="8"] {
top: 38.0952380952vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="8"] {
top: 38.0952380952vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="8"] {
top: 38.0952380952vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="8"] {
top: 38.0952380952vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="8"] {
top: 38.0952380952vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="8"] {
top: 38.0952380952vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="8"] {
top: 38.0952380952vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="8"] {
top: 38.0952380952vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="8"] {
top: 38.0952380952vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="8"] {
top: 38.0952380952vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(0deg);
}
.control[data-x="11"][data-y="8"] {
top: 38.0952380952vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(18deg);
}
.control[data-x="12"][data-y="8"] {
top: 38.0952380952vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(36deg);
}
.control[data-x="13"][data-y="8"] {
top: 38.0952380952vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(54deg);
}
.control[data-x="14"][data-y="8"] {
top: 38.0952380952vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(72deg);
}
.control[data-x="15"][data-y="8"] {
top: 38.0952380952vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(90deg);
}
.control[data-x="16"][data-y="8"] {
top: 38.0952380952vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(108deg);
}
.control[data-x="17"][data-y="8"] {
top: 38.0952380952vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(126deg);
}
.control[data-x="18"][data-y="8"] {
top: 38.0952380952vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(144deg);
}
.control[data-x="19"][data-y="8"] {
top: 38.0952380952vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(162deg);
}
.control[data-x="20"][data-y="8"] {
top: 38.0952380952vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="8"]:hover ~ .icon-store {
transform: rotateX(-36deg) rotateY(180deg);
}
.control[data-x="0"][data-y="9"] {
top: 42.8571428571vh;
left: 0vw;
}
.control[data-x="0"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="9"] {
top: 42.8571428571vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="9"] {
top: 42.8571428571vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="9"] {
top: 42.8571428571vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="9"] {
top: 42.8571428571vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="9"] {
top: 42.8571428571vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="9"] {
top: 42.8571428571vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="9"] {
top: 42.8571428571vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="9"] {
top: 42.8571428571vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="9"] {
top: 42.8571428571vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="9"] {
top: 42.8571428571vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(0deg);
}
.control[data-x="11"][data-y="9"] {
top: 42.8571428571vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(18deg);
}
.control[data-x="12"][data-y="9"] {
top: 42.8571428571vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(36deg);
}
.control[data-x="13"][data-y="9"] {
top: 42.8571428571vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(54deg);
}
.control[data-x="14"][data-y="9"] {
top: 42.8571428571vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(72deg);
}
.control[data-x="15"][data-y="9"] {
top: 42.8571428571vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(90deg);
}
.control[data-x="16"][data-y="9"] {
top: 42.8571428571vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(108deg);
}
.control[data-x="17"][data-y="9"] {
top: 42.8571428571vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(126deg);
}
.control[data-x="18"][data-y="9"] {
top: 42.8571428571vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(144deg);
}
.control[data-x="19"][data-y="9"] {
top: 42.8571428571vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(162deg);
}
.control[data-x="20"][data-y="9"] {
top: 42.8571428571vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="9"]:hover ~ .icon-store {
transform: rotateX(-18deg) rotateY(180deg);
}
.control[data-x="0"][data-y="10"] {
top: 47.619047619vh;
left: 0vw;
}
.control[data-x="0"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="10"] {
top: 47.619047619vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="10"] {
top: 47.619047619vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="10"] {
top: 47.619047619vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="10"] {
top: 47.619047619vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="10"] {
top: 47.619047619vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="10"] {
top: 47.619047619vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="10"] {
top: 47.619047619vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="10"] {
top: 47.619047619vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="10"] {
top: 47.619047619vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="10"] {
top: 47.619047619vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(0deg);
}
.control[data-x="11"][data-y="10"] {
top: 47.619047619vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(18deg);
}
.control[data-x="12"][data-y="10"] {
top: 47.619047619vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(36deg);
}
.control[data-x="13"][data-y="10"] {
top: 47.619047619vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(54deg);
}
.control[data-x="14"][data-y="10"] {
top: 47.619047619vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(72deg);
}
.control[data-x="15"][data-y="10"] {
top: 47.619047619vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(90deg);
}
.control[data-x="16"][data-y="10"] {
top: 47.619047619vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(108deg);
}
.control[data-x="17"][data-y="10"] {
top: 47.619047619vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(126deg);
}
.control[data-x="18"][data-y="10"] {
top: 47.619047619vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(144deg);
}
.control[data-x="19"][data-y="10"] {
top: 47.619047619vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(162deg);
}
.control[data-x="20"][data-y="10"] {
top: 47.619047619vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="10"]:hover ~ .icon-store {
transform: rotateX(0deg) rotateY(180deg);
}
.control[data-x="0"][data-y="11"] {
top: 52.380952381vh;
left: 0vw;
}
.control[data-x="0"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="11"] {
top: 52.380952381vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="11"] {
top: 52.380952381vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="11"] {
top: 52.380952381vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="11"] {
top: 52.380952381vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="11"] {
top: 52.380952381vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="11"] {
top: 52.380952381vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="11"] {
top: 52.380952381vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="11"] {
top: 52.380952381vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="11"] {
top: 52.380952381vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="11"] {
top: 52.380952381vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(0deg);
}
.control[data-x="11"][data-y="11"] {
top: 52.380952381vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(18deg);
}
.control[data-x="12"][data-y="11"] {
top: 52.380952381vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(36deg);
}
.control[data-x="13"][data-y="11"] {
top: 52.380952381vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(54deg);
}
.control[data-x="14"][data-y="11"] {
top: 52.380952381vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(72deg);
}
.control[data-x="15"][data-y="11"] {
top: 52.380952381vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(90deg);
}
.control[data-x="16"][data-y="11"] {
top: 52.380952381vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(108deg);
}
.control[data-x="17"][data-y="11"] {
top: 52.380952381vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(126deg);
}
.control[data-x="18"][data-y="11"] {
top: 52.380952381vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(144deg);
}
.control[data-x="19"][data-y="11"] {
top: 52.380952381vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(162deg);
}
.control[data-x="20"][data-y="11"] {
top: 52.380952381vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="11"]:hover ~ .icon-store {
transform: rotateX(18deg) rotateY(180deg);
}
.control[data-x="0"][data-y="12"] {
top: 57.1428571429vh;
left: 0vw;
}
.control[data-x="0"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="12"] {
top: 57.1428571429vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="12"] {
top: 57.1428571429vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="12"] {
top: 57.1428571429vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="12"] {
top: 57.1428571429vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="12"] {
top: 57.1428571429vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="12"] {
top: 57.1428571429vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="12"] {
top: 57.1428571429vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="12"] {
top: 57.1428571429vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="12"] {
top: 57.1428571429vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="12"] {
top: 57.1428571429vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(0deg);
}
.control[data-x="11"][data-y="12"] {
top: 57.1428571429vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(18deg);
}
.control[data-x="12"][data-y="12"] {
top: 57.1428571429vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(36deg);
}
.control[data-x="13"][data-y="12"] {
top: 57.1428571429vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(54deg);
}
.control[data-x="14"][data-y="12"] {
top: 57.1428571429vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(72deg);
}
.control[data-x="15"][data-y="12"] {
top: 57.1428571429vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(90deg);
}
.control[data-x="16"][data-y="12"] {
top: 57.1428571429vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(108deg);
}
.control[data-x="17"][data-y="12"] {
top: 57.1428571429vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(126deg);
}
.control[data-x="18"][data-y="12"] {
top: 57.1428571429vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(144deg);
}
.control[data-x="19"][data-y="12"] {
top: 57.1428571429vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(162deg);
}
.control[data-x="20"][data-y="12"] {
top: 57.1428571429vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="12"]:hover ~ .icon-store {
transform: rotateX(36deg) rotateY(180deg);
}
.control[data-x="0"][data-y="13"] {
top: 61.9047619048vh;
left: 0vw;
}
.control[data-x="0"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="13"] {
top: 61.9047619048vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="13"] {
top: 61.9047619048vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="13"] {
top: 61.9047619048vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="13"] {
top: 61.9047619048vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="13"] {
top: 61.9047619048vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="13"] {
top: 61.9047619048vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="13"] {
top: 61.9047619048vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="13"] {
top: 61.9047619048vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="13"] {
top: 61.9047619048vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="13"] {
top: 61.9047619048vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(0deg);
}
.control[data-x="11"][data-y="13"] {
top: 61.9047619048vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(18deg);
}
.control[data-x="12"][data-y="13"] {
top: 61.9047619048vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(36deg);
}
.control[data-x="13"][data-y="13"] {
top: 61.9047619048vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(54deg);
}
.control[data-x="14"][data-y="13"] {
top: 61.9047619048vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(72deg);
}
.control[data-x="15"][data-y="13"] {
top: 61.9047619048vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(90deg);
}
.control[data-x="16"][data-y="13"] {
top: 61.9047619048vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(108deg);
}
.control[data-x="17"][data-y="13"] {
top: 61.9047619048vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(126deg);
}
.control[data-x="18"][data-y="13"] {
top: 61.9047619048vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(144deg);
}
.control[data-x="19"][data-y="13"] {
top: 61.9047619048vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(162deg);
}
.control[data-x="20"][data-y="13"] {
top: 61.9047619048vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="13"]:hover ~ .icon-store {
transform: rotateX(54deg) rotateY(180deg);
}
.control[data-x="0"][data-y="14"] {
top: 66.6666666667vh;
left: 0vw;
}
.control[data-x="0"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="14"] {
top: 66.6666666667vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="14"] {
top: 66.6666666667vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="14"] {
top: 66.6666666667vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="14"] {
top: 66.6666666667vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="14"] {
top: 66.6666666667vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="14"] {
top: 66.6666666667vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="14"] {
top: 66.6666666667vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="14"] {
top: 66.6666666667vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="14"] {
top: 66.6666666667vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="14"] {
top: 66.6666666667vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(0deg);
}
.control[data-x="11"][data-y="14"] {
top: 66.6666666667vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(18deg);
}
.control[data-x="12"][data-y="14"] {
top: 66.6666666667vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(36deg);
}
.control[data-x="13"][data-y="14"] {
top: 66.6666666667vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(54deg);
}
.control[data-x="14"][data-y="14"] {
top: 66.6666666667vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(72deg);
}
.control[data-x="15"][data-y="14"] {
top: 66.6666666667vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(90deg);
}
.control[data-x="16"][data-y="14"] {
top: 66.6666666667vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(108deg);
}
.control[data-x="17"][data-y="14"] {
top: 66.6666666667vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(126deg);
}
.control[data-x="18"][data-y="14"] {
top: 66.6666666667vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(144deg);
}
.control[data-x="19"][data-y="14"] {
top: 66.6666666667vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(162deg);
}
.control[data-x="20"][data-y="14"] {
top: 66.6666666667vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="14"]:hover ~ .icon-store {
transform: rotateX(72deg) rotateY(180deg);
}
.control[data-x="0"][data-y="15"] {
top: 71.4285714286vh;
left: 0vw;
}
.control[data-x="0"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="15"] {
top: 71.4285714286vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="15"] {
top: 71.4285714286vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="15"] {
top: 71.4285714286vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="15"] {
top: 71.4285714286vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="15"] {
top: 71.4285714286vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="15"] {
top: 71.4285714286vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="15"] {
top: 71.4285714286vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="15"] {
top: 71.4285714286vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="15"] {
top: 71.4285714286vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="15"] {
top: 71.4285714286vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(0deg);
}
.control[data-x="11"][data-y="15"] {
top: 71.4285714286vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(18deg);
}
.control[data-x="12"][data-y="15"] {
top: 71.4285714286vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(36deg);
}
.control[data-x="13"][data-y="15"] {
top: 71.4285714286vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(54deg);
}
.control[data-x="14"][data-y="15"] {
top: 71.4285714286vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(72deg);
}
.control[data-x="15"][data-y="15"] {
top: 71.4285714286vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(90deg);
}
.control[data-x="16"][data-y="15"] {
top: 71.4285714286vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(108deg);
}
.control[data-x="17"][data-y="15"] {
top: 71.4285714286vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(126deg);
}
.control[data-x="18"][data-y="15"] {
top: 71.4285714286vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(144deg);
}
.control[data-x="19"][data-y="15"] {
top: 71.4285714286vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(162deg);
}
.control[data-x="20"][data-y="15"] {
top: 71.4285714286vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="15"]:hover ~ .icon-store {
transform: rotateX(90deg) rotateY(180deg);
}
.control[data-x="0"][data-y="16"] {
top: 76.1904761905vh;
left: 0vw;
}
.control[data-x="0"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="16"] {
top: 76.1904761905vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="16"] {
top: 76.1904761905vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="16"] {
top: 76.1904761905vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="16"] {
top: 76.1904761905vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="16"] {
top: 76.1904761905vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="16"] {
top: 76.1904761905vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="16"] {
top: 76.1904761905vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="16"] {
top: 76.1904761905vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="16"] {
top: 76.1904761905vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="16"] {
top: 76.1904761905vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(0deg);
}
.control[data-x="11"][data-y="16"] {
top: 76.1904761905vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(18deg);
}
.control[data-x="12"][data-y="16"] {
top: 76.1904761905vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(36deg);
}
.control[data-x="13"][data-y="16"] {
top: 76.1904761905vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(54deg);
}
.control[data-x="14"][data-y="16"] {
top: 76.1904761905vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(72deg);
}
.control[data-x="15"][data-y="16"] {
top: 76.1904761905vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(90deg);
}
.control[data-x="16"][data-y="16"] {
top: 76.1904761905vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(108deg);
}
.control[data-x="17"][data-y="16"] {
top: 76.1904761905vh;
left: 80.9523809524vw;
}
.control[data-x="17"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(126deg);
}
.control[data-x="18"][data-y="16"] {
top: 76.1904761905vh;
left: 85.7142857143vw;
}
.control[data-x="18"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(144deg);
}
.control[data-x="19"][data-y="16"] {
top: 76.1904761905vh;
left: 90.4761904762vw;
}
.control[data-x="19"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(162deg);
}
.control[data-x="20"][data-y="16"] {
top: 76.1904761905vh;
left: 95.2380952381vw;
}
.control[data-x="20"][data-y="16"]:hover ~ .icon-store {
transform: rotateX(108deg) rotateY(180deg);
}
.control[data-x="0"][data-y="17"] {
top: 80.9523809524vh;
left: 0vw;
}
.control[data-x="0"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(-180deg);
}
.control[data-x="1"][data-y="17"] {
top: 80.9523809524vh;
left: 4.7619047619vw;
}
.control[data-x="1"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(-162deg);
}
.control[data-x="2"][data-y="17"] {
top: 80.9523809524vh;
left: 9.5238095238vw;
}
.control[data-x="2"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(-144deg);
}
.control[data-x="3"][data-y="17"] {
top: 80.9523809524vh;
left: 14.2857142857vw;
}
.control[data-x="3"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(-126deg);
}
.control[data-x="4"][data-y="17"] {
top: 80.9523809524vh;
left: 19.0476190476vw;
}
.control[data-x="4"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(-108deg);
}
.control[data-x="5"][data-y="17"] {
top: 80.9523809524vh;
left: 23.8095238095vw;
}
.control[data-x="5"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(-90deg);
}
.control[data-x="6"][data-y="17"] {
top: 80.9523809524vh;
left: 28.5714285714vw;
}
.control[data-x="6"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(-72deg);
}
.control[data-x="7"][data-y="17"] {
top: 80.9523809524vh;
left: 33.3333333333vw;
}
.control[data-x="7"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(-54deg);
}
.control[data-x="8"][data-y="17"] {
top: 80.9523809524vh;
left: 38.0952380952vw;
}
.control[data-x="8"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(-36deg);
}
.control[data-x="9"][data-y="17"] {
top: 80.9523809524vh;
left: 42.8571428571vw;
}
.control[data-x="9"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(-18deg);
}
.control[data-x="10"][data-y="17"] {
top: 80.9523809524vh;
left: 47.619047619vw;
}
.control[data-x="10"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(0deg);
}
.control[data-x="11"][data-y="17"] {
top: 80.9523809524vh;
left: 52.380952381vw;
}
.control[data-x="11"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(18deg);
}
.control[data-x="12"][data-y="17"] {
top: 80.9523809524vh;
left: 57.1428571429vw;
}
.control[data-x="12"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(36deg);
}
.control[data-x="13"][data-y="17"] {
top: 80.9523809524vh;
left: 61.9047619048vw;
}
.control[data-x="13"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(54deg);
}
.control[data-x="14"][data-y="17"] {
top: 80.9523809524vh;
left: 66.6666666667vw;
}
.control[data-x="14"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(72deg);
}
.control[data-x="15"][data-y="17"] {
top: 80.9523809524vh;
left: 71.4285714286vw;
}
.control[data-x="15"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(90deg);
}
.control[data-x="16"][data-y="17"] {
top: 80.9523809524vh;
left: 76.1904761905vw;
}
.control[data-x="16"][data-y="17"]:hover ~ .icon-store {
transform: rotateX(126deg) rotateY(108deg);
}
.control[data-x="17"][data-y="17"] {
top: 80.9523809524vh;
left: 80.9523809524vw;
}
.control[data-x="17&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0