Почему значок шрифта удивительный поворачивается обратно в исходное положение при использовании: наведите курсор на его размер? - PullRequest
Новая
       51

Почему значок шрифта удивительный поворачивается обратно в исходное положение при использовании: наведите курсор на его размер?

0 голосов
/ 16 мая 2019

Я делаю слайдер изображений на своем сайте. У меня есть две иконки со стрелками FA на каждой стороне. Они оба повернуты на 90 градусов, чтобы указать наружу. У меня также есть :hover псевдокласс на каждом из них, чтобы масштабировать размер при зависании. Однако, хотя это будет масштабировать размер, он также повернет стрелку назад, где он начал. Почему это, я не могу найти твердый ответ. 

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');

ham.addEventListener('click', function() {
	ham.classList.add('ham-open');
	menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
	ham.classList.remove('ham-open');
	menu.style.marginLeft = '-700px';

})




window.sr = ScrollReveal();;

sr.reveal('.info', {
	duration: 2000,
	origin: 'bottom';
})
html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.header {
	background: url(img/mex-9.jpg);
	width: 100vw;
	height: 100vh;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	display: flex;
}

.nav-wrap {
	flex-basis: 40%;
}

.nav-wrap i {
	color: white;
	font-size: 2rem;
	position: absolute;
	right: -33px;
	top: 0px;
	transition: all .1s ease;
}

.nav-wrap i:hover {
	cursor: pointer;
	transform: scale(1.15);
}

.nav-box {
	margin-left: 50px;
	margin-top: 100px;
	max-width: 70px;
	cursor: pointer;
	position: fixed;
}

.b1, .b2, .b3 {
	width: 70px;
	height: 8.5px;
	border-radius: 5px;
	background-color: #fff;
	margin-bottom: 10px;
	transition: all .25s ease;
}

.b1 {
	background-color: #56ff47;
}

.b3 {
	background-color: #ff4c4c;
}

.ham-open .b1 {
	background-color: #56ff47;
	transform: translateY(100px);
	position: relative;
	z-index: 1;
}

.ham-open .b2 {
	transform: translateY(81.5px);
	width: 110px;
	position: relative;
	left: 60px;
	z-index: 0;
}

.ham-open .b3 {
	background-color: #ff4c4c;
	transform: translateY(63px);
	width: 140px;
	position: relative;
	left: 160px;
	z-index: 2;
}

.menu {
	display: flex;
	border-left: 8px solid #56ff47;
	flex-direction: column;
	background-color: #fff;
	margin-left: -700px;
	width: 292px;
	padding-top: 10px;
	padding-bottom: 10px;
	position: fixed;
	border-radius: 5px;
	top: 225px;
	transition: all .25s;
}

.menu a {
	text-decoration: none;
	color: limegreen;
	font-family: 'Kumar One Outline';
	font-size: 2.3rem;
	text-align: center;
	margin-top: 12px;
	margin-bottom: 12px;
	transition: all .5s ease;
}

a:hover {
	color: #007001;
}

.info-wrap {
	flex-basis: 60%;
}

.info {
	font-family: 'Cedarville Cursive';
	color: white;
	font-weight: bold;
	font-size: 4.5rem;
	text-align: center;
	margin-top: 60px;
}

.logo-wrap {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.logo-wrap div {
	font-family: 'Staatliches';
	color: white;
	font-size: 13rem;
	font-weight: bold;
	letter-spacing: 10px;
	margin-bottom: -5rem;
	position: relative;
	margin-left: auto;
	margin-right: auto;

}



/*------ABOUT------*/



.about-section {
	background-color: #35ad37;
}

.about-section h1 {
	text-align: center;
	font-size: 4.5rem;
	margin-top: 0;
	margin-bottom: 30px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;
}

.about-wrap {
	display: flex;
	padding-bottom: 80px;
}

.about-info, .image-slider-wrap {
	flex-basis: 50%;
}

.about-info p {
	color: white;
	font-family: 'Josefin Sans';
	font-size: 2rem;
	margin-left: 100px;
	margin-bottom: 0;
	margin-top: 0;
}

.image-slider {
	width: 650px;
	height: 400px;
	background-color: red;
	border-radius: 13px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.image-slider i {
	color: white;
	font-size: 5rem;
	position: absolute;
	top: 50%;
	margin-top: -40px;
	transition: all .1s ease;
	cursor: pointer;
}

#left {
	transform: rotate(-90deg);
	left: -30px;
}

#right {
	transform: rotate(90deg);
	right: -30px;
}

#left:hover {
	transform: rotate(-90deg);
	transform: scale(1.3);
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mexican Restaurant</title>
	<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<div class="header">
			<div class="nav-wrap">
				<div class="nav-box">
					<div class="b1"></div>
					<div class="b2"></div>
					<div class="b3"></div>
				</div>

				<div class="menu">
					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Menu</a>
					<a href="#">Contact</a>
					<a href="#">Location</a>
					<i class="fas fa-times" id="menu-close"></i>
				</div>
			</div>
			<div class="info-wrap">
				<p class="info">Authentic Mexican Food</p>

				<div class="logo-wrap">
					<div>YOUR</div>
					<div>LOGO</div>
					<div>HERE</div>
				</div>
			</div>
		</div>
	</header>
	<main>
		<div class="about-section">	
			<h1 class="about-h1">About Us</h1>

			<div class="about-wrap">
				<div class="about-info">
					<p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias voluptas pariatur consequuntur, repellat, laborum, rerum ipsum illo excepturi mollitia reprehenderit saepe nisi praesentium voluptate ab repellendus quos impedit, soluta natus dolore. Praesentium debitis odio cupiditate, reprehenderit alias. Sequi non beatae tempore fugit quia? Ratione aspernatur, quidem voluptates dignissimos Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo iure accusantium cupiditate hic, iste ab laborum incidunt neque a nihil, veritatis cumque quaerat, id laboriosam, labore eaque delectus perspiciatis.</p>
				</div>

				<div class="image-slider-wrap">	
					<div class="image-slider">
						<i class="fas fa-sort-up" id="left"></i>
						<i class="fas fa-sort-up" id="right"></i>
					</div>
				</div>
			</div>
		</div>
	</main>
	<footer>
		
	</footer>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</html>

1 Ответ

1 голос
/ 16 мая 2019

Вы должны поместить оба transform параметра в одну строку / правило, например:

transform: rotate(-90deg) scale(1.3);

В противном случае они действуют как два правила, где второе правило заменяет первое. 

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');

ham.addEventListener('click', function() {
	ham.classList.add('ham-open');
	menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
	ham.classList.remove('ham-open');
	menu.style.marginLeft = '-700px';

})




window.sr = ScrollReveal();;

sr.reveal('.info', {
	duration: 2000,
	origin: 'bottom';
})
html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.header {
	background: url(img/mex-9.jpg);
	width: 100vw;
	height: 100vh;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	display: flex;
}

.nav-wrap {
	flex-basis: 40%;
}

.nav-wrap i {
	color: white;
	font-size: 2rem;
	position: absolute;
	right: -33px;
	top: 0px;
	transition: all .1s ease;
}

.nav-wrap i:hover {
	cursor: pointer;
	transform: scale(1.15);
}

.nav-box {
	margin-left: 50px;
	margin-top: 100px;
	max-width: 70px;
	cursor: pointer;
	position: fixed;
}

.b1, .b2, .b3 {
	width: 70px;
	height: 8.5px;
	border-radius: 5px;
	background-color: #fff;
	margin-bottom: 10px;
	transition: all .25s ease;
}

.b1 {
	background-color: #56ff47;
}

.b3 {
	background-color: #ff4c4c;
}

.ham-open .b1 {
	background-color: #56ff47;
	transform: translateY(100px);
	position: relative;
	z-index: 1;
}

.ham-open .b2 {
	transform: translateY(81.5px);
	width: 110px;
	position: relative;
	left: 60px;
	z-index: 0;
}

.ham-open .b3 {
	background-color: #ff4c4c;
	transform: translateY(63px);
	width: 140px;
	position: relative;
	left: 160px;
	z-index: 2;
}

.menu {
	display: flex;
	border-left: 8px solid #56ff47;
	flex-direction: column;
	background-color: #fff;
	margin-left: -700px;
	width: 292px;
	padding-top: 10px;
	padding-bottom: 10px;
	position: fixed;
	border-radius: 5px;
	top: 225px;
	transition: all .25s;
}

.menu a {
	text-decoration: none;
	color: limegreen;
	font-family: 'Kumar One Outline';
	font-size: 2.3rem;
	text-align: center;
	margin-top: 12px;
	margin-bottom: 12px;
	transition: all .5s ease;
}

a:hover {
	color: #007001;
}

.info-wrap {
	flex-basis: 60%;
}

.info {
	font-family: 'Cedarville Cursive';
	color: white;
	font-weight: bold;
	font-size: 4.5rem;
	text-align: center;
	margin-top: 60px;
}

.logo-wrap {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.logo-wrap div {
	font-family: 'Staatliches';
	color: white;
	font-size: 13rem;
	font-weight: bold;
	letter-spacing: 10px;
	margin-bottom: -5rem;
	position: relative;
	margin-left: auto;
	margin-right: auto;

}



/*------ABOUT------*/



.about-section {
	background-color: #35ad37;
}

.about-section h1 {
	text-align: center;
	font-size: 4.5rem;
	margin-top: 0;
	margin-bottom: 30px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;
}

.about-wrap {
	display: flex;
	padding-bottom: 80px;
}

.about-info, .image-slider-wrap {
	flex-basis: 50%;
}

.about-info p {
	color: white;
	font-family: 'Josefin Sans';
	font-size: 2rem;
	margin-left: 100px;
	margin-bottom: 0;
	margin-top: 0;
}

.image-slider {
	width: 650px;
	height: 400px;
	background-color: red;
	border-radius: 13px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.image-slider i {
	color: white;
	font-size: 5rem;
	position: absolute;
	top: 50%;
	margin-top: -40px;
	transition: all .1s ease;
	cursor: pointer;
}

#left {
	transform: rotate(-90deg);
	left: -30px;
}

#right {
	transform: rotate(90deg);
	right: -30px;
}

#left:hover {
	transform: rotate(-90deg) scale(1.3);
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mexican Restaurant</title>
	<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<div class="header">
			<div class="nav-wrap">
				<div class="nav-box">
					<div class="b1"></div>
					<div class="b2"></div>
					<div class="b3"></div>
				</div>

				<div class="menu">
					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Menu</a>
					<a href="#">Contact</a>
					<a href="#">Location</a>
					<i class="fas fa-times" id="menu-close"></i>
				</div>
			</div>
			<div class="info-wrap">
				<p class="info">Authentic Mexican Food</p>

				<div class="logo-wrap">
					<div>YOUR</div>
					<div>LOGO</div>
					<div>HERE</div>
				</div>
			</div>
		</div>
	</header>
	<main>
		<div class="about-section">	
			<h1 class="about-h1">About Us</h1>

			<div class="about-wrap">
				<div class="about-info">
					<p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias voluptas pariatur consequuntur, repellat, laborum, rerum ipsum illo excepturi mollitia reprehenderit saepe nisi praesentium voluptate ab repellendus quos impedit, soluta natus dolore. Praesentium debitis odio cupiditate, reprehenderit alias. Sequi non beatae tempore fugit quia? Ratione aspernatur, quidem voluptates dignissimos Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo iure accusantium cupiditate hic, iste ab laborum incidunt neque a nihil, veritatis cumque quaerat, id laboriosam, labore eaque delectus perspiciatis.</p>
				</div>

				<div class="image-slider-wrap">	
					<div class="image-slider">
						<i class="fas fa-sort-up" id="left"></i>
						<i class="fas fa-sort-up" id="right"></i>
					</div>
				</div>
			</div>
		</div>
	</main>
	<footer>
		
	</footer>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</html>
...