Как можно определить положение элемента по оси “Z”?

#javascript

Коллеги, есть такой пример:



const image = [
  'https://www.prodaman.ru/users/5824/photos/users/91721_big.jpg',
  'https://cdn1.kolektado.com/media/cache/profile_photo_thumb/0a/c1/30a031c98ab4ac27fce46377bb70.jpeg',
  'http://dlm6.meta.ua/pic/0/33/31/2se9MTgTyR.jpg',
  'http://ladyjob.com.ua/application/content/news/5483.jpg',
  'https://articles.abilogic.com/data/uploads/0000098000/600/abi_0000098616.thumb.100.jpg',
  'https://freelance.boutique/img/avatars/302073.png',
  'http://by.badgood.info/photos/avatars/16463/29215eefb9.jpg',
  'http://pda.svidanok.net/files/imagecache/thumb/images/users/irishka89_uid36441_00000.jpg',
  'http://vseotzyvy.ru/media/cache/a1/ee/a1ee8d99a67b9a355c44b2e9557141b2.jpg',
  'https://ц.укр/uploads/users/484396/100_791b00bc996a467.jpg'
];

const layerShadowSlider = document.querySelectorAll('.layer-shadow-slider');
const ticker = document.querySelectorAll('.ticker');

for (var i = 0; i < ticker.length; i++) {
  ticker[i].style.backgroundImage = 'url(' + image[i] + ')';
  ticker[i].style.transform = 'rotateY(' + (i + 1) * 36 + 'deg) translateZ(430px)';
}

const wrapTicker = document.querySelector('#wrap-ticker')

window.addEventListener('keydown', (event) => {

})
/* изменения в коде */


function MyMatrix() {

}


MyMatrix.prototype.matrix3d = function() {
  layerShadowSlider[1].innerHTML = arguments[14];
  //console.log('matrix3d', arguments[14]); // Предпоследний аргумент - положение по Z. 
}

var MM = new MyMatrix();

function getPoisition() {
  for (var i = 0; i < ticker.length; i++) {
    var method = document.defaultView.getComputedStyle(ticker[0])["transform"];
    // Чуть чуть извращений
    eval('MM.' + method);
  }
  requestAnimationFrame(getPoisition);
}
requestAnimationFrame(getPoisition);

/* изменения в коде */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #272727;
  border-top: 1px solid transparent;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.layer-shadow-slider {
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 250px);
  width: 500px;
  height: 300px;
  box-shadow: inset 50px 0px 100px 50px rgba(39, 39, 39, 1);
}

.layer-shadow-slider:nth-child(2) {
  box-shadow: inset -50px 0px 100px 50px rgba(39, 39, 39, 1);
}

#main-wrap-slider {
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 250px);
  overflow: hidden;
  width: 500px;
  height: 300px;
}

#wrap-ticker {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-color: transparent;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: rotate 60s linear infinite;
}

.ticker {
  position: absolute;
  background-size: cover;
  backface-visibility: hidden;
  border-radius: 50%;
  width: 100px;
  height: 100%;
  text-align: right;
  line-height: 3;
  font-family: sans-serif;
  color: white;
  font-size: 2rem;
  transform-origin: 50% 50%;
}

@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

  

    

      
      
      
      
      
      
      
      
      
      
    
  
  

  






Вопрос: Как можно определить положение элемента  по оси Z? 

После коммента  Other  попытался так. Смотрите изменения в коде. (устарел)

После ответа Stepan Kasyanenko в третий раз редактирую вопрос. Но или я что-то не
делаю или ответ не тот который мне нужен...

Смотрите изменения в коде
    

Ответы

Ответ 1

Можно получить через getComputedStyle значение transform, которое будет являться,
в вашем случае, matrix3d, которая в свою очередь описывает трансформацию нашего элемента,
включая rotate, scale, translate.

Есть статья на хабре (или в спецификации, я не осилил), описывающая значения этой
матрицы.

Пример, как получить значение traslateZ из элемента.



const image = [
  'https://www.prodaman.ru/users/5824/photos/users/91721_big.jpg',
  'https://cdn1.kolektado.com/media/cache/profile_photo_thumb/0a/c1/30a031c98ab4ac27fce46377bb70.jpeg',
  'http://dlm6.meta.ua/pic/0/33/31/2se9MTgTyR.jpg',
  'http://ladyjob.com.ua/application/content/news/5483.jpg',
]

const ticker = document.querySelectorAll('.ticker');

for (var i = 0; i < ticker.length; i++) {
  ticker[i].style.backgroundImage = 'url(' + image[i] + ')';
  ticker[i].style.transform = 'translateZ(' + (i + 1) * 10 + 'px) translateX(' +
(i + 1) * 10 + 'px)';
}



function MyMatrix() {

}

MyMatrix.prototype.matrix3d = function() {
  console.log('traslateZ', arguments[14]); // Предпоследний аргумент - положение по Z. 
}

var MM = new MyMatrix();


function getPoisition() {
  for (var i = 0; i < ticker.length; i++) {
    var method = document.defaultView.getComputedStyle(ticker[i])["transform"];
    // Чуть чуть извращений
    eval('MM.' + method);
  }
}
getPoisition();

shuffle.addEventListener("click", () => {
  for (var i = 0; i < ticker.length; i++) {
    var random = Math.round(Math.random() * 100);
    ticker[i].style.transform = 'translateZ(' + random + 'px) translateX(' + (i +
1) * 10 + 'px)';
  }
  getPoisition();
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ticker {
  position: absolute;
  background-size: cover;
  backface-visibility: hidden;
  border-radius: 50%;
  top: 50px;
  width: 100px;
  height: 100px;
  text-align: right;
  line-height: 3;
  font-family: sans-serif;
  color: white;
  font-size: 2rem;
}










Пример вычислений угла поворота по оси Y, а именно значения rotateY.



const image = [
  'https://www.prodaman.ru/users/5824/photos/users/91721_big.jpg',
  'https://cdn1.kolektado.com/media/cache/profile_photo_thumb/0a/c1/30a031c98ab4ac27fce46377bb70.jpeg',
  'http://dlm6.meta.ua/pic/0/33/31/2se9MTgTyR.jpg',
  'http://ladyjob.com.ua/application/content/news/5483.jpg',
]

const ticker = document.querySelectorAll('.ticker');

for (var i = 0; i < ticker.length; i++) {
  ticker[i].style.backgroundImage = 'url(' + image[i] + ')';
  ticker[i].style.transform = 'rotateY(' + (i + 1) * 10 + 'deg) translateX(' + (i
+ 1) * 100 + 'px)';
}



function MyMatrix() {

}

MyMatrix.prototype.matrix3d = function() {
  console.log('rotateY', this.toDegree(Math.acos(arguments[0]))) // Первый аргумент
- косинус угла в радианах. Переводим его в градусы
}
MyMatrix.prototype.toDegree = function(rad) {
  return Math.round(rad * 180 / Math.PI);
}

var MM = new MyMatrix();


function getPoisition() {
  for (var i = 0; i < ticker.length; i++) {
    var method = document.defaultView.getComputedStyle(ticker[i])["transform"];
    // Чуть чуть извращений
    eval('MM.' + method);
  }
}
getPoisition();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ticker {
  position: absolute;
  background-size: cover;
  backface-visibility: hidden;
  border-radius: 50%;
  top: 50px;
  width: 100px;
  height: 100px;
  text-align: right;
  line-height: 3;
  font-family: sans-serif;
  color: white;
  font-size: 2rem;
}








Финальный вариант - высчитывание текущего элемента, который показывается на первом плане.



const image = [
  'https://www.prodaman.ru/users/5824/photos/users/91721_big.jpg',
  'https://cdn1.kolektado.com/media/cache/profile_photo_thumb/0a/c1/30a031c98ab4ac27fce46377bb70.jpeg',
  'http://dlm6.meta.ua/pic/0/33/31/2se9MTgTyR.jpg',
  'http://ladyjob.com.ua/application/content/news/5483.jpg',
  'https://articles.abilogic.com/data/uploads/0000098000/600/abi_0000098616.thumb.100.jpg',
  'https://freelance.boutique/img/avatars/302073.png',
  'http://by.badgood.info/photos/avatars/16463/29215eefb9.jpg',
  'http://pda.svidanok.net/files/imagecache/thumb/images/users/irishka89_uid36441_00000.jpg',
  'http://vseotzyvy.ru/media/cache/a1/ee/a1ee8d99a67b9a355c44b2e9557141b2.jpg',
  'https://ц.укр/uploads/users/484396/100_791b00bc996a467.jpg'
];

const layerShadowSlider = document.querySelectorAll('.layer-shadow-slider');
const ticker = document.querySelectorAll('.ticker');

for (var i = 0; i < ticker.length; i++) {
  ticker[i].style.backgroundImage = 'url(' + image[i] + ')';
  ticker[i].style.transform = 'rotateY(' + (i + 1) * 36 + 'deg) translateZ(430px)';
  ticker[i].textContent = i;
}

const wrapTicker = document.querySelector('#wrap-ticker')

window.addEventListener('keydown', (event) => {

})
/* изменения в коде */


function MyMatrix() {

}


MyMatrix.prototype.matrix3d = function() {
  return [].slice.call(arguments);
}

MyMatrix.prototype.toDegree = function(rad) {
  return Math.round(rad * 180 / Math.PI);
}

var MM = new MyMatrix();

function getPoisition() {
  var method = document.defaultView.getComputedStyle(document.getElementById('wrap-ticker'))["transform"];
  // Чуть чуть извращений
  try {
    var matrix3d = eval('MM.' + method);
    var rotateY = MM.toDegree(Math.acos(matrix3d[0]));
    var currentI = Math.round(rotateY / 36);
    layerShadowSlider[1].textContent = Math.abs(currentI - 9);
  } catch (e) {}
  requestAnimationFrame(getPoisition);

}
requestAnimationFrame(getPoisition);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #272727;
  border-top: 1px solid transparent;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.layer-shadow-slider {
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 250px);
  width: 500px;
  height: 300px;
  box-shadow: inset 50px 0px 100px 50px rgba(39, 39, 39, 1);
}

.layer-shadow-slider:nth-child(2) {
  box-shadow: inset -50px 0px 100px 50px rgba(39, 39, 39, 1);
}

#main-wrap-slider {
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 250px);
  overflow: hidden;
  width: 500px;
  height: 300px;
}

#wrap-ticker {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-color: transparent;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: rotate 60s linear infinite;
}

.ticker {
  position: absolute;
  background-size: cover;
  backface-visibility: hidden;
  border-radius: 50%;
  width: 100px;
  height: 100%;
  text-align: right;
  line-height: 3;
  font-family: sans-serif;
  color: white;
  font-size: 2rem;
  transform-origin: 50% 50%;
  text-align: center;
}

@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}