CSS 3 Dカード効果(transform、perspective)
11613 ワード
レッスンソース:メモリカード|CSS Effects,ローカルストレージ-Brad Traversy
カードの前後ビューを反転できる3 D効果を実現します.
次のカードをクリックして、
カード裏面の効果.
コードは以下の通りです.
HTML
パースビューは深さを表す属性で、Z軸の変化を表示します.
値が低ければ低いほど、間近で見ることができるようになります.すなわち、3 D効果が際立っています.
サブエレメント.Inner cardのtransform-stypeを設定することで3 d空間配置を行う.
transform-styleは、サブ要素を3 d空間に配置するか、平らに配置するかを決定します.
.inner-card-frontわあInner card-backからbackface-visibility:隠すことで背面が見えなくなります.
CSS backface-visibilityプロパティは、要素の背面がユーザーに向いている場合に表示すべきかどうかを指定します.
.card上のshow-response classであるか否かによってx軸の回転角度が変化する論理.
カードの前後ビューを反転できる3 D効果を実現します.
次のカードをクリックして、
カード裏面の効果.
コードは以下の通りです.
HTML
<h1>
Memory Cards
<button id="show" class="btn btn-small">
<i class="fas fa-plus"></i> Add New Card
</button>
</h1>
<div id="cards-container" class="cards">
</div>
<div class="navigation">
<button id="prev" class="nav-button">
<i class="fas fa-arrow-left"></i>
</button>
<p id="current"></p>
<button id="next" class="nav-button">
<i class="fas fa-arrow-right"></i>
</button>
</div>
CSS.cards {
perspective: 1000px;
position: relative;
height: 300px;
width: 500px;
max-width: 100%;
}
.card {
position: absolute;
opacity: 0;
font-size: 20px;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: translateX(50%) rotateY(-10deg);
transition: transform 0.4s ease, opacity 0.4s ease;
}
.card.active {
cursor: pointer;
opacity: 1;
z-index: 10;
transform: translateX(0) rotateY(0deg);
}
.inner-card {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
border-radius: 4px;
height: 100%;
width: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.4s ease;
}
.card.show-answer .inner-card {
transform: rotateX(180deg);
}
.inner-card-front,
.inner-card-back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background: #fff;
}
.inner-card-front {
transform: rotateX(0deg);
z-index: 2;
}
.inner-card-back {
transform: rotateX(180deg);
}
.inner-card-front::after,
.inner-card-back::after {
content: "\f021 Flip";
font-family: "Font Awesome 5 Free", Lato, sans-serif;
position: absolute;
top: 10px;
right: 10px;
font-weight: bold;
font-size: 16px;
color: #ddd;
}
JSconst cardsData = [{question:"What is PHP?", answer: "Programming Language"}];
// Create all cards
function createCards() {
cardsData.forEach((data, index) => createCard(data, index));
}
// Create a single cards in DOM
function createCard(data, index) {
const card = document.createElement("div");
card.classList.add("card");
if (index === 0) {
card.classList.add("active");
}
card.innerHTML = `
<div class="inner-card">
<div class="inner-card-front">
<p>${data.question}</p>
</div>
<div class="inner-card-back">
<p>${data.answer}</p>
</div>
</div>
`;
card.addEventListener("click", () => card.classList.toggle("show-answer"));
// Add to DOM cards
cardsEl.push(card);
cardsContainer.appendChild(card);
updateCurrentText();
}
// Show number of cards
function updateCurrentText() {
currentEl.innerText = `${currentActiveCard + 1}/${cardsEl.length}`;
}
createCards();
3 Dカードの上下反転効果を作成するキーは、パースビューとスタイルの変換、背面の可視性、Xの回転です..cards{ perspective : 1000px}
.inner-card {transform-style: preserve-3d;}
.card.show-answer .inner-card {
transform: rotateX(180deg);
}
.inner-card-front,
.inner-card-back {
backface-visibility: hidden;}
.inner-card-front{transform: rotateX(0);}
.inner-card-back{transform: rotateX(180deg);}
大きな容器cardsのパースビューを設定することで、3 d効果を与えます.パースビューは深さを表す属性で、Z軸の変化を表示します.
値が低ければ低いほど、間近で見ることができるようになります.すなわち、3 D効果が際立っています.
サブエレメント.Inner cardのtransform-stypeを設定することで3 d空間配置を行う.
transform-styleは、サブ要素を3 d空間に配置するか、平らに配置するかを決定します.
.inner-card-frontわあInner card-backからbackface-visibility:隠すことで背面が見えなくなります.
CSS backface-visibilityプロパティは、要素の背面がユーザーに向いている場合に表示すべきかどうかを指定します.
.card上のshow-response classであるか否かによってx軸の回転角度が変化する論理.
Reference
この問題について(CSS 3 Dカード効果(transform、perspective)), 我々は、より多くの情報をここで見つけました https://velog.io/@hoje15v/CSS-3D-카드-효과-transform-perspectiveテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol