CSS旋转图像XY

时间：2015-02-14 14:36:38

标签： html css image

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

.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">

但是我希望看到图像总是面朝上而不是面朝下和强壮...如果你看到你会理解的例子（很难用英语解释它）。

4 个答案:

答案 0 :(得分：1)

我认为您正在寻找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">

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
.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);
    }
}
＆＃13; 
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

如果我理解正确，你最好避免这种情况，图像＆＃34;翻转＆＃34;立即从正面朝上。

你可以替代＆＃39;动画：使用该关键字，最后它会停止并向后设置动画：

＆＃13;
＆＃13; 
.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);
    }
}
＆＃13; 
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我想你想要像

这样的东西 
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">

相关问题
最新问题