css - 如何在动画 css 中打开门效果从右到左打开？

Question

是否可以打开门动画 css 从右到左打开。

here是一个从左到右打开的示例。

.slideshow .overlay-item  {
    position: absolute;
    top: 0;
    right:0;
    z-index: 999;
    width: 360px;
    background: rgba(248, 148, 6, 0.67);
    height: 400px;
    padding: 10px 30px;
    display: none;
    -webkit-animation: opendoor 0.75s ease 0s alternate;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

Answer 1

改变opendoor动画如下:

@-webkit-keyframes opendoor {
    from {
        -webkit-transform: perspective(1000px) rotateY(-90deg);
        -webkit-transform-origin: 100% 50%;
    }
    to {
        -webkit-transform: perspective(1000px) rotateY(0deg);
        -webkit-transform-origin: 100% 50%;
    }
}

closedoor相应的动画:

@-webkit-keyframes closedoor {
    from {
        opacity:1;
        -webkit-transform-origin: 100% 50%;
    }
    to {
        opacity:0;
        -webkit-transform-origin: 100% 50%;
    }
}

演示在这里: http://www.bootply.com/Te5VrShLV5 .