Страницы

Поиск по вопросам

суббота, 27 октября 2018 г.

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

Коллеги, есть такой пример:
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 в третий раз редактирую вопрос. Но или я что-то не делаю или ответ не тот который мне нужен...
Смотрите изменения в коде


Ответ

Можно получить через 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); } }


Комментариев нет:

Отправить комментарий