• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Co zrobić by translate[0] nie było stringiem tylko nadawało wartość dla css .front {JAVA-SCRIPT}

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
202 wizyt
pytanie zadane 17 marca 2022 w JavaScript przez chrystian Gaduła (4,780 p.)
const translate = [
	/*front , bottom, back, top, left, right*/
];
window.onload = load;
function load() {
	const section = document.querySelector(".cube");
	// console.log(section);
	section.addEventListener("click", changeside);
}
function changeside() {
	console.log("CLiCK");
	rotate();
	translate[0] = translate[1];
}
rotate();
function rotate() {
	const side = document.getElementsByTagName("DIV");
	// console.log(side[0]);
	//  0 - front;
	translate[0] = "side[" + 0 + "].style.transform:" + "rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg) skewY(" + 45 + "deg) translateY(" + 100 + "px);";
	translate[0];
	// 1-bottom
	translate[1] = "side[" + 0 + "].style.transform:" + "transform: rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg);";
	//  2-back
	translate[2] =
		"side[" + 0 + "].style.transform:" + "transform: rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg) skewY(" + 45 + "deg) translateX(" + 200 + "px) translateY(" + 100 + "px);";
	//  3-top
	translate[3] = "side[" + 0 + "].style.transform:" + "transform: rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg) translateZ(" + 165 + "px);";
	// 4 - left
	translate[4] =
		"side[" + 0 + "].style.transform:" + "transform: rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg) skewX(" + 45 + "deg) translateY(" + 200 + "px) translateX(" + -100 + "px);";
	//  5 - right;
	translate[5] = "side[" + 0 + "].style.transform:" + "transform: rotateX(" + 120 + "deg) rotateZ(" + 45 + "deg) skewX(" + 45 + "deg)  translateX(" + 100 + "px);";
}

html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Square</title>

		<link rel="stylesheet" href="square.css" />
	</head>
	<body>
		<article class="container">
			<section class="cube">
				<div class="front"></div>
				<div class="bottom"></div>
				<div class="back"></div>
				<div class="top"></div>
				<div class="left"></div>
				<div class="right"></div>
			</section>
		</article>
	</body>
	<script src="square.js"></script>
</html>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");
body {
	background: #dee7fa;
	color: #083d77;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2.5rem;
	font-weight: bold;
	text-transform: uppercase;
}
.container {
	position: absolute;
	top: 50%;
	right: 55%;
}
div {
	background: #8da9c4;
	position: absolute;
	border: 3px solid #0b2545;
	opacity: 0.4;
	min-height: 200px;
	min-width: 200px;
}
.front {
	transform: rotateX(120deg) rotateZ(45deg) skewY(45deg) translateY(100px);
}
.bottom {
	background: #0b2545;
	opacity: 0.5;
	transform: rotateX(120deg) rotateZ(45deg);
}
.back {
	transform: rotateX(120deg) rotateZ(45deg) skewY(45deg) translateX(200px)
		translateY(-100px);
}

.top {
	transform: rotateX(120deg) rotateZ(45deg) translateZ(165px);
}
.left {
	transform: rotateX(120deg) rotateZ(45deg) skewX(45deg) translateY(200px)
		translateX(-100px);
}
.right {
	transform: rotateX(120deg) rotateZ(45deg) skewX(45deg) translateX(100px);
}

 

komentarz 17 marca 2022 przez chrystian Gaduła (4,780 p.)
tak getCompcośtamdalej a pózniej getCośtamValue pobiera wartość matrixa3D albo console.log zwraca pustą gdy wpisuja rotate
komentarz 17 marca 2022 przez rafal.budzis Szeryf (85,380 p.)
Nie mówię o get computed tylko o drugim przykladze na zmiennych css  Zerknij jeszcze raz

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 212 wizyt
0 głosów
1 odpowiedź 1,004 wizyt
pytanie zadane 19 grudnia 2015 w HTML i CSS przez xR Mądrala (6,260 p.)
+1 głos
3 odpowiedzi 267 wizyt
pytanie zadane 18 kwietnia 2017 w Offtop przez mgtfv2 Początkujący (270 p.)

93,103 zapytań

142,077 odpowiedzi

321,570 komentarzy

62,445 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...