卡卡網(wǎng)

本文介紹4款純CSS實現(xiàn)的3D按鈕點擊過渡效果。

demodownload

HTML

4款3D按鈕實例不同的過渡效果完全由不同的CSS來實現(xiàn)，它們具有相同的HTML代碼。

button標簽作為按鈕容器，其class屬性值是button。

button標簽內(nèi)第一層div的class屬性值是wrapper，該div內(nèi)有6個div，它們的class屬性值依次分別是front、top、right、bottom、left、back。第一個div里的文字(click)是按鈕點擊前顯示的文字，最后一個div里的文字(Thank You!)是按鈕點擊后顯示的文字。

<button class="button" type="button">
    <div class="wrapper">
      <div class="front">Click</div>
      <div class="top"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="left"></div>
      <div class="back">Thank You!</div>
    </div>
</button>

CSS

4款3D按鈕實例外觀一樣，它們不同的過渡效果由不同的CSS來定義。

.button {
    --font-size: 1.5rem;
    --perspective: calc(var(--font-size) * 10);
    --bg: hsl(210, 100%, 56%);
    --bg-accent: hsl(210, 100%, 46%);
    --duration: 800ms;
    --ease: cubic-bezier(0.3, 1.4, 0.65, 1);
    cursor: pointer;
    position: relative;
    perspective: var(--perspective);
    font-family: inherit;
    font-size: var(--font-size);
    font-weight: bold;
    color: white;
    border: none;
    outline: none;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

.button:focus {
    z-index: 1;
}

.button:focus-visible {
    --size: 3px;
    outline: var(--size) dashed var(--bg);
    outline-offset: calc(var(--size) * 2);
}

.button .wrapper {
    position: relative;
    display: grid;
    transform: translateZ(calc(var(--font-size) * -1)) scale(1.001) rotateX(0)
rotateY(0) rotateZ(0);
    transform-style: preserve-3d;
    pointer-events: none;
}

.button .wrapper {
    transition: transform var(--duration) var(--ease);
}

.button .wrapper > * {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration) var(--ease);
}

.button .front,
.button .back {
    padding: 1rem 2rem;
    background-color: var(--bg);
}

.button .wrapper :not(.front):not(.back) {
    background-color: var(--bg-accent);
}

.button .top,
.button .bottom {
    width: 100%;
    height: var(--font-size);
}

.button .left,
.button .right {
    width: var(--font-size);
    height: 100%;
}

.button .front {
    transform: translateZ(var(--font-size));
}

.button .back {
    transform: scaleX(-1);
}

.button .top {
    transform-origin: top center;
    transform: rotateX(90deg);
}

.button .bottom {
    align-self: end;
    transform-origin: bottom center;
    transform: rotateX(-90deg);
}

.button .right {
    justify-self: end;
    transform-origin: center right;
    transform: rotateY(90deg);
}

.button .left {
    justify-self: start;
    transform-origin: center left;
    transform: rotateY(-90deg);
}

.button.clicked {
    --bg: hsl(147, 50%, 47%);
    --bg-accent: hsl(147, 50%, 37%);
}

.clicked:nth-child(1) .wrapper {
    transform: translateZ(0) scale(1.001) rotateY(0.5turn);
}

.clicked:nth-child(2) .wrapper {
    transform: translateZ(0) scale(1.001) rotateX(-0.5turn) rotateY(0)
rotateZ(-0.5turn);
}

.button:nth-child(3) .back {
    transform: scaleX(-1) rotate(0.5turn);
}

.clicked:nth-child(3) .wrapper {
    transform: translateZ(0) scale(1.001) rotateX(1.5turn) rotateY(0) rotateZ(0);
}

.button:nth-child(4) {
    --duration: 1400ms;
}

.clicked:nth-child(4) .wrapper {
    transform: translateZ(0) scale(1.001) rotateX(0.5turn) rotateY(0)
rotateZ(1.5turn);
}

css中nth-child(n)，n值從1到4，是對應4個實例的css。

Javascript

實例用到一點JS代碼，主要是對按鈕的點擊動作進行監(jiān)聽。

[...document.querySelectorAll(".button")].forEach(button => {
  button.addEventListener("click", () => button.classList.toggle("clicked"));
});

該段代碼的含義是當點擊按鈕時，按鈕的class屬性值變?yōu)?code>clicked。

總結

本文介紹了4款純CSS實現(xiàn)的3D按鈕點擊過渡效果。4款3D按鈕實例不同的過渡效果完全由不同的CSS來實現(xiàn)，它們具有相同的HTML代碼。

您可能對以下文章也感興趣

• 16款精美的CSS3動畫按鈕（有懸停動畫效果）
• 9個CSS鼠標懸停效果
• 6個CSS按鈕邊框過渡動畫效果
• 30個漂亮的CSS漸變按鈕，鼠標滑過(hover)動畫效果
• 很好看的css3動畫按鈕鼠標懸停效果【2個實例】
• 漂亮懸停效果的CSS3動畫按鈕【5個實例代碼】

• CSS3顏色漸變按鈕 鼠標劃過變色
• 【8個實例】純CSS按鈕(button)，簡單漂亮實用
• CSS懸停效果按鈕一簡單實例（鼠標移到按鈕上變成其他顏色）
• 很好看的css3動畫按鈕鼠標懸停效果【2個實例】
• 漂亮的偽元素CSS按鈕5個實例代碼
• 20個純CSS3實現(xiàn)的彩色透明水晶按鈕

標簽: css3  css  3D按鈕  button  按鈕  動畫按鈕