1

I'm using the Guid here: https://www.sitepoint.com/building-3d-rotating-carousel-css-javascript/, it works fine but not in safari. I try to find out what Safari does different to other Browser in this case. I guess a certain Math function like: theta = 2 * Math.PI / numImages,in Safari creates another reference to find a center in 3D space, z axis.

I can't really dig much deeper myself. I should try to move the object bit more far from Screen on z axis

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head
 <body>
<div class="carousel">
    <figure>
   <img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="" name="bar">
    <img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="" name="bar1">
        <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="" name="bar2">
        <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="" name="bar3">
        <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="" name="bar4">
        <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="" name="bar5">
    <img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="" name="bar6">
        <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="" name="bar7">
    </figure>
    <nav>
        <button class="nav prev">Prev</button>
        <button class="nav next">Next</button>
    </nav>
</div>
  <!-- Modal -->
  <div class="modal fade" id="bar" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Options</h4>
        </div>
        <div class="modal-body">
          <p>Modal content..</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
<!-- Modal -->
  <div class="modal fade" id="bar1" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Modal 1 Options</h4>
        </div>
        <div class="modal-body">
          <p>Modal 1 content..</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</div>
  <!-- Modal -->
  <div class="modal fade" id="bar2" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Modal Options</h4>
        </div>
        <div class="modal-body">
          <p>Modal content..</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</div>
<!-- Modal -->
  <div class="modal fade" id="bar3" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Modal 3</h4>
        </div>
        <div class="modal-body">
          <p>Modal 3 content..</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</div>
 </body>

$('img').on('click', function(){
//  $(this).css({"background-color": "yellow", "font-size": "200%"})
  var name = $(this).attr('name');
 // console.log(name);
  $('#' + name).modal({show: true});
});


var
    carousel = document.querySelector('.carousel'),
    figure = carousel.querySelector('figure'),
    nav = carousel.querySelector('nav'),
    numImages = figure.childElementCount,
    theta =  2 * Math.PI / numImages,
    currImage = 0
;

nav.addEventListener('click', onClick, true);

function onClick(e) {
    e.stopPropagation();

    var t = e.target;
    if (t.tagName.toUpperCase() != 'BUTTON')
        return;

    if (t.classList.contains('next')) {
        currImage++;
    }
    else {
        currImage--;
    }

    figure.style.transform = `rotateY(${currImage * -theta}rad)`;
}

body {
  margin: 0;
  font-family: "Roboto";
  font-size: 16px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}

.plakat {
  width: 100%

}

.carousel {
  padding: 20px;
  -webkit-perspective: 500px;
          perspective: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.carousel > * {
  flex: 0 0 auto;
}
.carousel figure {
  margin: 0;
  width: 400px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform-origin: 50% 50% -482.8427124746px;
          transform-origin: 50% 50% -482.8427124746px;
}
.carousel figure img {
  width: 100%;
  box-sizing: border-box;
  padding: 0 40px;
  opacity: 0.9;
}
.carousel figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform-origin: 50% 50% -482.8427124746px;
          transform-origin: 50% 50% -482.8427124746px;
}
.carousel figure img:nth-child(2) {
  -webkit-transform: rotateY(0.7853981634rad);
          transform: rotateY(0.7853981634rad);
}
.carousel figure img:nth-child(3) {
  -webkit-transform: rotateY(1.5707963268rad);
          transform: rotateY(1.5707963268rad);
}
.carousel figure img:nth-child(4) {
  -webkit-transform: rotateY(2.3561944902rad);
          transform: rotateY(2.3561944902rad);
}
.carousel figure img:nth-child(5) {
  -webkit-transform: rotateY(3.1415926536rad);
          transform: rotateY(3.1415926536rad);
}
.carousel figure img:nth-child(6) {
  -webkit-transform: rotateY(3.926990817rad);
          transform: rotateY(3.926990817rad);
}
.carousel figure img:nth-child(7) {
  -webkit-transform: rotateY(4.7123889804rad);
          transform: rotateY(4.7123889804rad);
}
.carousel figure img:nth-child(8) {
  -webkit-transform: rotateY(5.4977871438rad);
          transform: rotateY(5.4977871438rad);
}
.carousel nav {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}
.carousel nav button {
  flex: 0 0 auto;
  margin: 0 5px;
  cursor: pointer;
  color: #333;
  background: none;
  border: 1px solid;
  letter-spacing: 1px;
  padding: 5px 10px;
}

here is a codepen: https://codepen.io/scribbi/pen/ZPRzrp

it should look like this: 3d Carousel

But it looks like that: wrong rendering 3D carousel

As we can see here: http://thenewcode.com/736/Advanced-CSS-3D-Carousel the problem already exists, Safari "displaces the transform-origin-z coordinate for the gallery, pushing it forward in the browser"

for some reason it is rotating around the center of the fifth Image, while the first image is positioned deeper in the carousel. Another approach here: https://codepen.io/scribbi/pen/BEjJLY is functioning in these Browsers, no SCSS is used and more hardcoding needed. As well it's not yet responsive. maybe related: -webkit-transform-style: preserve-3d not working

expris
  • 53
  • 6

0 Answers0