Bloggerデザイン : 3Dダイナミック・フリップカード

1. デザインのタイプ

【3Dダイナミック・フリップカード】
最新のCSS 3D技術を活用し、カードが回転する際にコンテンツが背景から浮き上がって見える、奥行き感に特化したインタラクティブ・ショーケースです。表面で視覚的な興味を引き、裏面で詳細情報やアクション（ボタン）を提示する、CTA（Call To Action）に最適なデザインとなっています。

Custom Domains

A short sentence describing this callout is.

Custom Domains

A short sentence describing this callout is.

2. デザインの特徴

• 本格的な3D奥行き（Z軸アニメーション）
  単なる回転だけでなく、translateZ プロパティによってテキストやボタンが画像から数ミリ浮き出ているような視覚効果を実装。高級感のある操作感を提供します。
• スムーズな反転アクション
  preserve-3d と backface-visibility を駆使し、表裏が瞬時に入れ替わる滑らかなアニメーションを実現しています。
• コンテンツの二段構え
  表面で「キャッチ」を見せ、裏面で「アクション（ボタン）」を促すという、CTA（Call To Action）に最適な構造になっています。

3. 紹介コード

<style>
/* --- Card Wrapper --- */
#blg-flip-v5 {
  padding: 60px 10px;
  background-color: #f6f6f6;
  font-family: 'Open Sans', sans-serif;
}

.box-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Box Item (Perspective) --- */
.box-item {
  width: 100%;
  max-width: 380px;
  perspective: 1200px;
}

/* --- Flip Box --- */
.flip-box {
  position: relative;
  width: 100%;
  height: 475px;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.box-item:hover .flip-box {
  transform: rotateY(-180deg);
}

/* --- Front & Back sides --- */
.flip-box-front,
.flip-box-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d; /* 内部の奥行きを維持 */
}

/* Overlay */
.flip-box-front::after,
.flip-box-back::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  z-index: 1;
}

.flip-box-front {
  z-index: 2;
  transform: rotateY(0deg);
}

.flip-box-back {
  z-index: 1;
  transform: rotateY(180deg);
}

/* --- Inner Content (Floating) --- */
.flip-box .inner {
  position: relative;
  padding: 40px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  z-index: 2;
  /* 背景から浮かせる */
  transform: translateZ(90px) scale(0.92); 
}

.flip-box-header {
  font-size: 34px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  color: #fff !important;
  text-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border: none !important;
  padding: 0 !important;
}

.flip-box p {
  font-size: 19px !important;
  line-height: 1.6em !important;
  color: #fff !important;
  margin: 0 !important;
}

.flip-box-img {
  margin-top: 30px;
  width: 50px;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
}

.flip-box-button {
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 2px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-top: 30px;
  padding: 15px 30px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s;
  transform: translateZ(10px);
}

.flip-box-button:hover {
  background-color: #fff;
  color: #333;
}
</style>

<div id="blg-flip-v5">
  <div class="box-container">
    <div class="box-item">
      <div class="flip-box">
        <div class="flip-box-front" style="background-image: url('https://s25.postimg.cc/frbd9towf/cta-2.png');">
          <div class="inner">
            <h3 class="flip-box-header">Custom Domains</h3>
            <p>A short sentence describing this callout is.</p>
            <img alt="" class="flip-box-img" src="https://s25.postimg.cc/65hsttv9b/cta-arrow.png" />
          </div>
        </div>
      </div>
   </div>
</div>
</div>