.box {
width: 180px;
height: 180px;
float: left;
/* display: inline; */
transition: 1s linear;
transform-style: preserve-3d;
}
#stage {
width: 560px;
height: 100px;
perspective: 300px;
}
#boxx:hover {
transform: rotateX(60deg);
}
#boxy:hover {
transform: rotateY(60deg);
}
#boxz:hover {
transform: rotateZ(60deg);
}
将标签类型转换为inline会导致元素无法正常进行变换,建议使用float:left进行排版