纯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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0