event.clientY - card.getBoundingClientRect().topconst card = document.querySelector('.container');
const cardItm = document.querySelector('.card');
const halfHeight = card.offsetHeight / 2;
const halfWidth = card.offsetHeight / 2;
card.addEventListener('mousemove', startRotate);
card.addEventListener('mouseout', stopRotate);
function startRotate() {
cardItm.style.transform = `rotateX(${-((event.clientY - card.getBoundingClientRect().top) - halfHeight) / 20}deg) rotateY(${((event.clientX - card.getBoundingClientRect().left) - halfWidth) / 20}deg)`;
};
function stopRotate(event) {
cardItm.style.transform = 'rotateX(0)';
};<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="light.css" class="style">
</head>
<body>
<button id="color">Сменить цвет</button>
<script type="text/javascript">
if (localStorage.getItem('style') == 'dark') {
document.querySelector('.style').href="dark.css";
}
document.querySelector('#color').onclick = function (){
if (document.querySelector('.style').getAttribute('href') === 'light.css') {
document.querySelector('.style').href="dark.css";
localStorage.setItem('style', 'dark');
} else {
document.querySelector('.style').href="light.css";
localStorage.setItem('style', 'light');
}
}
</script>
</body>
</html><style type="text/css">
body {
background: #fff;
color: #000;
}
#color {
color: #fff;
background: #000;
}
.dark {
background: #000;
color: #fff;
}
.dark #color {
color: #000;
background: #fff;
}
</style>
<button id="color">Сменить цвет</button>
<script type="text/javascript">
if (localStorage.getItem('style') == 'dark') {
document.body.classList.toggle('dark');
}
document.querySelector('#color').onclick = function (){
document.body.classList.toggle('dark');
if (document.body.getAttribute('class') == 'dark') {
localStorage.setItem('style', 'dark');
} else {
localStorage.setItem('style', '');
}
}
</script>if(currentBtn.classList.contains('active')){
currentBtn.classList.remove('active');
currentTub.classList.remove('active');
}const tabsBtn = document.querySelectorAll(".tabs__nav-btn");
const tabsItems = document.querySelectorAll(".tabs__item");
tabsBtn.forEach(onTabClick);
function onTabClick(item) {
item.addEventListener("click", function() {
let currentBtn = item;
let tabId = currentBtn.getAttribute("data-tab");
let currentTub = document.querySelector(tabId);
if(currentBtn.classList.contains('active')){
currentBtn.classList.remove('active');
currentTub.classList.remove('active');
} else if ( ! currentBtn.classList.contains('active') ) {
tabsBtn.forEach(function(item) {
item.classList.remove('active');
});
tabsItems.forEach(function(item) {
item.classList.remove('active');
});
currentBtn.classList.add('active');
currentTub.classList.add('active');
}
});
}