1. <div id="wrapper">
  2. <input type="radio" id="switch1" name="slideshow" checked>
  3. <input type="radio" id="switch2" name="slideshow">
  4. <input type="radio" id="switch3" name="slideshow">
  5. <div id="slideshow">
  6. <div class="slideContents">
  7. <section id="slide01">
  8. <div class="contents">
  9. <h1>要素を立体的に</h1>
  10. <p>3Dtransformを使って、さらに立体感。</p>
  11. </div>
  12. <img src="../img/slide_01.png">
  13. </section>
  14. <section id="slide02">
  15. <div class="contents">
  16. <h1>要素を立体的に</h1>
  17. <p>3Dtransformを使って、さらに立体感。</p>
  18. </div>
  19. <img src="../img/slide_02.png">
  20. </section>
  21. <section id="slide03">
  22. <div class="contents">
  23. <h1>要素を立体的に</h1>
  24. <p>3Dtransformを使って、さらに立体感。</p>
  25. </div>
  26. <img src="../img/slide_03.png">
  27. </section>
  28. </div>
  29. <p class="arrow prev">
  30. <i class="ico"></i>
  31. <label for="switch1"></label>
  32. <label for="switch2"></label>
  33. <label for="switch3"></label>
  34. </p>
  35. <p class="arrow next">
  36. <i class="ico"></i>
  37. <label for="switch1"></label>
  38. <label for="switch2"></label>
  39. <label for="switch3"></label>
  40. </p>
  41. </div>
  42. </div>
  1. /* 略 */
  2. /* :::::: action mechanism :::::: */
  3. .slideContents section,
  4. .slideContents section h1,
  5. .slideContents section p {
  6. -webkit-transition: opacity 1s, -webkit-transform 1s;
  7. transition: opacity 1s, transform 1s;
  8. }
  9. #switch1:checked ~ #slideshow .slideContents #slide01 h1,
  10. #switch1:checked ~ #slideshow .slideContents #slide01 p,
  11. #switch2:checked ~ #slideshow .slideContents #slide02 h1,
  12. #switch2:checked ~ #slideshow .slideContents #slide02 p,
  13. #switch3:checked ~ #slideshow .slideContents #slide03 h1,
  14. #switch3:checked ~ #slideshow .slideContents #slide03 p {
  15. opacity: 1;
  16. }
  17. /* 要素を立体的に */
  18. .slideContents {
  19. -webkit-perspective: 1000px;
  20. perspective: 1000px;
  21. }
  22. .slideContents section h1 {
  23. transition-delay: .6s, 0s;
  24. }
  25. .slideContents section p {
  26. transition-delay: .4s, 0s;
  27. }
  28. .slideContents section {
  29. -webkit-transform: translateX(500px) rotateY(-90deg);
  30. transform: translateX(500px) rotateY(-90deg);
  31. transition-duration: .8s, 1.2s;
  32. }
  33. #switch1:checked ~ #slideshow .slideContents #slide01,
  34. #switch2:checked ~ #slideshow .slideContents #slide02,
  35. #switch3:checked ~ #slideshow .slideContents #slide03 {
  36. -webkit-transform: translateX(0) rotateY(0deg);
  37. transform: translateX(0) rotateY(0deg);
  38. transition-delay: .2s, 0s;
  39. }
  40. #switch2:checked ~ #slideshow .slideContents #slide01,
  41. #switch3:checked ~ #slideshow .slideContents #slide02,
  42. #switch1:checked ~ #slideshow .slideContents #slide03 {
  43. -webkit-transform: translateX(-500px) rotateY(90deg);
  44. transform: translateX(-500px) rotateY(90deg);
  45. }

要素を立体的に

3Dtransformを使って、さらに立体感。

要素を立体的に

3Dtransformを使って、さらに立体感。

要素を立体的に

3Dtransformを使って、さらに立体感。