CSS旋转图像 [英] CSS Rotating Images
本文介绍了CSS旋转图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
简而言之：我正在尝试模仿此滑块，但是使用动画而不是过渡，因此我可以使用自动播放选项： codepen.io/dudleystorey/pen/HrFBx
In short: I am trying to mimic this slider but with animations, not transitions, so I can have autoplay option: codepen.io/dudleystorey/pen/HrFBx
说明：
我正在使用动画的CSS滑块。这是CodePen上的链接： https://codepen.io/anon/pen/vZXQEa
编辑：我需要没有脚本的
在代码中：
CSS：
body { margin: 0; background: #121; }
figure {
margin: 0;
position: relative;
perspective: 1800px;
transform-style: preserve-3d;
max-width: 1000px;
padding-bottom: 56.25%;
}
figure img {
top: 0;
left: 0;
position: absolute;
transition: 1s;
width: 100%;
}
@keyframes rotateFirst {
0%, 20%{
transform: rotateY(0deg);
}
80%, 100%{
transform: rotateY(180deg);
}
}
@keyframes rotateSecond {
0%, 20%{
transform: rotateY(-180deg);
}
80%, 100%{
transform: rotateY(0deg);
}
}
.first{
animation:rotateFirst 5s infinite;
}
.second{
animation:rotateSecond 5s infinite;
}
HTML：
<figure id=blinds-window>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
test <img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
由于我是CSS动画的新手，在这里我面临两个简单的挑战：
I have two simple challenges here as I am new to CSS animations:
1-图像旋转不正常，很容易在我的CodePen链接上注意到。他们可能一起移动。
2-我想在图像上添加文字。我尝试在图片上添加测试，但对我而言不起作用。
1- The images don't rotate properly, it's easy to notice on my CodePen link. They probably move together.
2- I want to add text on images. I tried adding 'test' on images but it's not working on my side.
谢谢！
推荐答案
这是您可以做的，在图中添加一个类（此处为 anim ）并更改
悬停规则来自
Here is what you can do, add a class (here anim) to the figure and change the
hover rule from
figure:hover img.first { transform: rotateY(180deg); }
figure:hover img.second { transform: rotateY(0deg) translateZ(1px); }
至
figure.anim img.first {
animation-name: rotateus;
animation-duration: 1s;
animation-fill-mode: forwards;
}
figure.anim img.second {
animation-name: rotateus2;
animation-duration: 1s;
animation-fill-mode: forwards;
}
我还添加了 @keyframes 规则，将转换延迟更改为动画延迟
I also added a @keyframes rule and change from transition-delay to animation-delay
已更新： 基于评论，我还添加了一些文本
堆栈片段
body { margin: 0; background: #121; }
figure {
margin: 0;
position: relative;
perspective: 1800px;
transform-style: preserve-3d;
max-width: 1000px;
padding-bottom: 56.25%;
}
body::before,
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg) no-repeat left top;
background-size: 100%;
}
body::after {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg) no-repeat left top;
background-size: 100%;
animation-name: swapbkg;
animation-duration: 8s;
animation-iteration-count: infinite;
}
div {
top: 0;
left: 0;
position: absolute;
color: white;
font-size: 40px;
opacity: 1;
z-index: 10;
transform: translate(10px, 10px);
animation-duration: 8s;
animation-iteration-count: infinite;
}
div:nth-of-type(2) {
animation-name: swaptext2;
}
div:nth-of-type(1) {
animation-name: swaptext1;
}
figure img {
top: 0;
left: 0;
position: absolute;
width: 100%;
}
figure.anim img.first {
animation-name: rotateus2;
animation-duration: 8s;
animation-iteration-count: infinite;
}
figure.anim img.second {
animation-name: rotateus;
animation-duration: 8s;
animation-iteration-count: infinite;
}
@keyframes rotateus {
0%, 80%, 100% {
transform: rotateY(0deg);
}
30%, 50% {
transform: rotateY(180deg);
}
}
@keyframes rotateus2 {
0%, 80%, 100% {
transform: rotateY(-180deg) translateZ(1px);
}
30%, 50% {
transform: rotateY(0deg) translateZ(1px);
}
}
@keyframes swapbkg {
0%, 39% {
z-index: -1;
}
40%, 80% {
z-index: -2;
}
}
@keyframes swaptext1 {
0%, 20%, 50%, 100% {
opacity: 0;
}
25%, 45% {
opacity: 1;
}
}
@keyframes swaptext2 {
0%, 70%, 100% {
opacity: 0;
}
75%, 95% {
opacity: 1;
}
}
figure img:nth-child(1), figure img:nth-child(11) {
clip: rect(0px, 100px, 840px, 0px);
transform-origin: 50px 0px;
}
figure img:nth-child(2), figure img:nth-child(12) {
clip: rect(0px, 200px, 840px, 100px);
transform-origin: 150px 0px;
animation-delay: 100ms;
}
figure img:nth-child(3), figure img:nth-child(13) {
clip: rect(0px, 300px, 840px, 200px);
transform-origin: 250px 0px;
animation-delay: 200ms;
}
figure img:nth-child(4), figure img:nth-child(14) {
clip: rect(0px, 400px, 840px, 300px);
transform-origin: 350px 0px;
animation-delay: 300ms;
}
figure img:nth-child(5), figure img:nth-child(15) {
clip: rect(0px, 500px, 840px, 400px);
transform-origin: 450px 0px;
animation-delay: 400ms;
}
figure img:nth-child(6), figure img:nth-child(16) {
clip: rect(0px, 600px, 840px, 500px);
transform-origin: 550px 0px;
animation-delay: 500ms;
}
figure img:nth-child(7), figure img:nth-child(17) {
clip: rect(0px, 700px, 840px, 600px);
transform-origin: 650px 0px;
animation-delay: 600ms;
}
figure img:nth-child(8), figure img:nth-child(18) {
clip: rect(0px, 800px, 840px, 700px);
transform-origin: 750px 0px;
animation-delay: 700ms;
}
figure img:nth-child(9), figure img:nth-child(19) {
clip: rect(0px, 900px, 840px, 800px);
transform-origin: 850px 0px;
animation-delay: 800ms;
}
figure img:nth-child(10), figure img:nth-child(20) {
clip: rect(0px, 1000px, 840px, 900px);
transform-origin: 950px 0px;
animation-delay: 900ms;
}
<figure id=blinds-window class="anim">
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
</figure>
<div>Here is a text</div>
<div>Here is another text</div>
如果要保持过渡并开火使用脚本将鼠标悬停规则更改为此
If to keep transition and fire it with a script, change hover rule to this
figure.anim img.first { transform: rotateY(180deg); }
figure.anim img.second { transform: rotateY(0deg) translateZ(1px); }
我还添加了一个事件处理程序，该事件处理程序在页面加载后添加该类
堆栈片段
window.addEventListener('load', function() {
var fig = document.querySelector('figure');
setTimeout(function () {
fig.classList.add('anim');
}, 500)
})
body { margin: 0; background: #121; }
figure {
margin: 0;
position: relative;
perspective: 1800px;
transform-style: preserve-3d;
max-width: 1000px;
padding-bottom: 56.25%;
}
figure img {
top: 0;
left: 0;
position: absolute;
transition: 1s;
width: 100%;
}
figure img.first { transform: rotateY(0deg); }
figure img.second { transform: rotateY(-180deg) translateZ(1px); }
figure.anim img.first { transform: rotateY(180deg); }
figure.anim img.second { transform: rotateY(0deg) translateZ(1px); }
figure img:nth-child(1), figure img:nth-child(11) {
clip: rect(0px, 100px, 840px, 0px);
transform-origin: 50px 0px;
}
figure img:nth-child(2), figure img:nth-child(12) {
clip: rect(0px, 200px, 840px, 100px);
transform-origin: 150px 0px;
transition-delay: 100ms;
}
figure img:nth-child(3), figure img:nth-child(13) {
clip: rect(0px, 300px, 840px, 200px);
transform-origin: 250px 0px;
transition-delay: 200ms;
}
figure img:nth-child(4), figure img:nth-child(14) {
clip: rect(0px, 400px, 840px, 300px);
transform-origin: 350px 0px;
transition-delay: 300ms;
}
figure img:nth-child(5), figure img:nth-child(15) {
clip: rect(0px, 500px, 840px, 400px);
transform-origin: 450px 0px;
transition-delay: 400ms;
}
figure img:nth-child(6), figure img:nth-child(16) {
clip: rect(0px, 600px, 840px, 500px);
transform-origin: 550px 0px;
transition-delay: 500ms;
}
figure img:nth-child(7), figure img:nth-child(17) {
clip: rect(0px, 700px, 840px, 600px);
transform-origin: 650px 0px;
transition-delay: 600ms;
}
figure img:nth-child(8), figure img:nth-child(18) {
clip: rect(0px, 800px, 840px, 700px);
transform-origin: 750px 0px;
transition-delay: 700ms;
}
figure img:nth-child(9), figure img:nth-child(19) {
clip: rect(0px, 900px, 840px, 800px);
transform-origin: 850px 0px;
transition-delay: 800ms;
}
figure img:nth-child(10), figure img:nth-child(20) {
clip: rect(0px, 1000px, 840px, 900px);
transform-origin: 950px 0px;
transition-delay: 900ms;
}
<figure id=blinds-window>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/autumn-face.jpg alt class=first>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
<img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/julia.jpg alt class=second>
</figure>
这篇关于CSS旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
