Head Over Heels
このページを参考にCSS3のアニメーションをやってみたいのですがよく意味がわかりません。どなたか簡単で良いので解説していただけないでしょうか?
lang
1 @for $slide from 1 through $slides { 2 $perc:1 / $slides; 3 $i: ($slide - 1) * $perc; 4 $color:adjust-hue( red, ($slide * 10%) ); 5 &:nth-child(#{$slide}) { 6 transform:rotate(90deg) translateY(-100%) translateX(($slide - 1) * 99.9vw); 7 background-color:$color; 8 9 // trail and error 10 // there's a logic behind it, but I got screwed up by all the rotations 11 &:after { 12 top: $slide * -100%; 13 left: $slide * -100%; 14 width: $slide * 200%; 15 height: $slide * 200%; 16 background-size:($slide * 200%) ($slide * 200%); 17 transform:scale(1-$i); 18 } 19 } 20 } 21
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/03/14 06:49
2015/03/14 07:24
退会済みユーザー
2015/03/14 08:13