纯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=&.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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