CSS 旋转图像 XY

Question

我已经完成了一些旋转图像的例子：

.image {
    width: 60px;
    height: 60px;
    background-color: #0080FF;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}
@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

但我希望看到图像总是面朝上，而不是面朝下，并且有力量......如果你看到这个例子你就会明白（对我来说很难用英语解释）。

Answer 1

我没有在最后一个变换中旋转 Y @keyframe 100%，而是应用了垂直翻转，这里是代码片段：

.image {
    width: 60px;
    height: 60px;
    background-color: #0080FF;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) scaleY(-1) rotateX(180deg)
    }
}
@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg)  scaleY(-1) ;
        -webkit-transform: perspective(120px) rotateX(-180deg) scaleY(-1);
    }
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

Answer 2

如果我理解正确的话，你最终会希望避免这种情况，图像 "flips" 立即从头朝上变成正面朝上。

您可以 'alternate' 动画：使用该关键字，最后它停止并向后动画：

.image {
    width: 60px;
    height: 60px;
    background-color: #0080FF;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s ease-in-out 0s infinite alternate ;
    animation: rotateplane 1.2s ease-in-out 0s infinite alternate;
}

@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}
@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

Answer 3

我认为您正在寻找 scaleX(-1) 和 scaleY(-1) 来翻转图像。

代码段：

.image {
    width: 60px;
    height: 60px;
    background-color: #0080FF;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px) scaleX(1) scaleY(1)
    }
    25% {
        -webkit-transform: perspective(120px) rotateY(90deg) scaleX(1) scaleY(1)
    }
    25.1% {
        -webkit-transform: perspective(120px) rotateY(90deg) scaleX(-1) scaleY(1)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg) scaleX(-1) scaleY(1)
    }
    75% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(90deg) scaleX(-1) scaleY(1)
    }
    75.1% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(90deg) scaleX(-1) scaleY(-1)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) scaleX(-1) scaleY(-1)
    }
}
@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1)
    }
    25% {
        transform: perspective(120px) rotateX(-90deg) rotateY(0deg) scaleX(1) scaleY(1);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1)
    }
    25.1% {
        transform: perspective(120px) rotateX(-90deg) rotateY(0deg) scaleX(1) scaleY(-1);
        -webkit-transform: perspective(120px) rotateX(-90deg) rotateY(0deg) scaleX(1) scaleY(-1)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) scaleX(1) scaleY(-1);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) scaleX(1) scaleY(-1)
    }
    75% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(-90deg) scaleX(1) scaleY(-1);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(-90deg) scaleX(1) scaleY(-1)
    }
    75.1% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(-90deg) scaleX(-1) scaleY(-1);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(-90deg) scaleX(-1) scaleY(-1)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg) scaleX(-1) scaleY(-1);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg) scaleX(-1) scaleY(-1);
    }
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

Answer 4

我想你想要这样的东西

0% {
    transform: perspective(120px) rotateX(0deg)   rotateY(0deg);
}
25% {
    transform: perspective(120px) rotateX(-90deg) rotateY(0deg);
}
25.0001% {
    transform: perspective(120px) rotateX(90deg)  rotateY(0deg);
}
50% {
    transform: perspective(120px) rotateX(0deg)   rotateY(0deg);
}
75% {
    transform: perspective(120px) rotateX(0)      rotateY(-90deg);
}
75.001% {
    transform: perspective(120px) rotateX(0)      rotateY(90deg);
}
100% {
    transform: perspective(120px) rotateX(0deg)   rotateY(0deg);
}

.image {
    width: 60px;
    height: 60px;
    background-color: #0080FF;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    25% {
        -webkit-transform: perspective(120px) rotateX(-90deg) rotateY(0deg);
    }
    25.0001% {
        -webkit-transform: perspective(120px) rotateX(90deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    75% {
        -webkit-transform: perspective(120px) rotateX(0) rotateY(-90deg);
    }
    75.001% {
        -webkit-transform: perspective(120px) rotateX(0) rotateY(90deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
}
@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: perspective(120px) rotateX(-90deg) rotateY(0deg);
    }
    25.0001% {
        transform: perspective(120px) rotateX(90deg) rotateY(0deg);
    }
    50% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    75% {
        transform: perspective(120px) rotateX(0) rotateY(-90deg);
    }
    75.001% {
        transform: perspective(120px) rotateX(0) rotateY(90deg);
    }
    100% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

CSS 旋转图像 XY

CSS Rotate Image XY

html

css

image