html5中translate,translateX()

HTML

CSS

.stage{width:100px;height:100px;}

.box {

width:50px; height:50px;

background:red;

animation:flipAround 4s infinite;

transform-origin:right;

}

@keyframes 'flipAround' {

25% {

transform-origin:right;

animation-mode:forwards;

transform:rotateY(-180deg);

}

25.001% {

transform-origin:bottom;

transform:translateX(50px); //旋转轴的 X 坐标 50个像素。

}

50% {

transform-origin:bottom;

transform:translateX(50px) rotateX(-180deg);

}

50.001% {

transform-origin:left;

transform:translateX(50px) translateY(50px);

}

75% {

transform-origin:left;

transform:translateX(50px) translateY(50px) rotateY(180deg);

}

75.001% {

transform-origin:top;

transform:translateY(50px);

}

100% {

transform-origin:top;

transform:translateY(50px) rotateX(180deg);

}

}

执行结果