純css3實作3D立方體旋轉特效程式碼-css教學-PHP中文網

首頁

web前端

css教學

純css3實作3D立方體旋轉特效程式碼

零下一度

May 17, 2017 pm 05:36 PM

上網易前端微專業課程，裡面有一個課外作業是實現一個3D旋轉立方體，花了點時間做了下，還有點意思，寫個簡單教程，供大家學習。先放上最終要實現的效果.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS3 3D立方体多边形动画特效 - 代码笔记</title><style type="text/css">*{
 margin:0 auto;
    padding:0;
}
@keyframes rotate{
    0%{
        transform:rotateX(0deg) rotateY(0deg);
    }
    100%{
        transform:rotateX(360deg) rotateY(360deg);
    }
}
html{
    background:linear-gradient(#ff0 0%, #000 80%);
    height:100%;
}
.wrap{
    margin-top:200px;
    perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */
}
.cube{
    width:200px;
    height:200px;
    position:relative;
    color:#fff;
    font-size:36px;
    font-weight:bold;
    text-align:center;
    line-height:200px;
    transform-style:preserve-3d; /* 默认flat 2D */
    transform:rotateX(-30deg) rotateY(-70deg); 
    animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
}
.cube > div{
    width:100%;
    height:100%;
    border:1px solid #fff;
    position:absolute;
    background-color:#333;
    opacity:.6;
    transition:transform 0.4s ease-in;
}
.cube .out-front{
    transform: translateZ(100px);
}
.cube .out-back{
    transform: translateZ(-100px) rotateY(180deg);
}
.cube .out-left{
    transform: translateX(-100px) rotateY(-90deg);
}
.cube .out-right{ 
    transform: translateX(100px) rotateY(90deg);
}
.cube .out-top{
    transform: translateY(-100px) rotateX(90deg);
}
.cube .out-bottom{
    transform: translateY(100px) rotateX(-90deg);
}
.cube > span{
    display:block;
    width:100px;
    height:100px;
    border:1px solid black;
    background-color:#999;
    position:absolute;
    top:50px;
    left:50px;
}
.cube .in-front{
    transform: translateZ(50px);
}
.cube .in-back{
    transform: translateZ(-50px) rotateY(180deg);
}
.cube .in-left{
    transform: translateX(-50px) rotateY(-90deg);
}
.cube .in-right{
    transform: translateX(50px) rotateY(90deg);
}
.cube .in-top{
    transform: translateY(-50px) rotateX(90deg);
}
.cube .in-bottom{
    transform: translateY(50px) rotateX(-90deg);
}
.wrap:hover .out-front{
    transform: translateZ(200px);
}
.wrap:hover .out-back{
    transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover .out-left{
    transform: translateX(-200px) rotateY(-90deg);
}
.wrap:hover .out-right{
    transform: translateX(200px) rotateY(90deg);
}
.wrap:hover .out-top{
    transform: translateY(-200px) rotateX(90deg);
}
.wrap:hover .out-bottom{
    transform: translateY(200px) rotateX(-90deg);
}
 
</style>
</head>
<body>
<div class="wrap">
    <div class="cube">
        <div class="out-front">前面</div>
        <div class="out-back">后面</div>
        <div class="out-left">左面</div>
        <div class="out-right">右面</div> 
        <div class="out-top">上面</div>
        <div class="out-bottom">下面</div>
 
        <span class="in-front"></span>
        <span class="in-back"></span>
        <span class="in-left"></span>
        <span class="in-right"></span>
        <span class="in-top"></span>
        <span class="in-bottom"></span>
    </div>
</div>
 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>

登入後複製

【相關推薦】

#1. #特別推薦#：“ php程式設計師工具箱」V0.1版本下載

2. 免費css線上影片教學

3. php.cn獨孤九賤（2）－css影片教學

以上是純css3實作3D立方體旋轉特效程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1319

PHP教程

1269

C# 教程

1248

Related knowledge

如何使用Vue實現彈出視窗特效 Sep 22, 2023 am 09:40 AM

如何使用Vue實現彈出視窗特效，需要具體程式碼範例近年來，隨著Web應用的發展，彈出視窗特效已成為廣大開發者常用的互動方式之一。 Vue作為一款受歡迎的JavaScript框架，提供了豐富的功能和易用性，非常適合用來實現彈出視窗特效。本文將介紹如何使用Vue實現彈出視窗特效，並提供具體程式碼範例。首先，我們需要使用Vue的CLI工具來建立一個新的Vue專案。打開終

如何使用Vue實現全螢幕遮罩特效 Sep 19, 2023 pm 04:14 PM

如何使用Vue實現全螢幕遮效在Web開發中，我們經常會遇到需要全螢幕遮罩的場景，例如在載入資料時顯示一個遮罩層以阻止使用者進行其他操作，或在某些特殊場景下需要用遮罩層來反白某個元素。 Vue是一個流行的JavaScript框架，它提供了方便的工具和元件來實現各種效果。在本文中，我將介紹如何使用Vue來實現全螢幕遮罩的效果，並提供一些具體的程式碼範例。首先，我們

實作微信小程式中的卡片翻轉特效 Nov 21, 2023 am 10:55 AM

實作微信小程式中的卡片翻轉特效在微信小程式中，實現卡片翻轉特效是一種常見的動畫效果，可以提升使用者體驗和介面互動的吸引力。以下將具體介紹如何在微信小程式中實現卡片翻轉的特效，並提供相關程式碼範例。首先，需要在小程式的頁面佈局檔案中定義兩個卡片元素，一個用於顯示正面內容，一個用於顯示背面內容，具體範例程式碼如下：&l

如何使用Vue實現側邊欄特效 Sep 19, 2023 pm 02:00 PM

如何使用Vue實現側邊欄特效Vue是一款流行的JavaScript框架，它的簡單易用和靈活性使開發人員能夠快速建立互動性強的單頁應用程式。在這篇文章中，我們將學習如何使用Vue來實現一個常見的側邊欄特效，同時提供具體的程式碼範例幫助我們更好地理解。建立Vue專案首先，我們需要建立一個Vue專案。可以使用Vue提供的VueCLI（命令列介面），它能夠快速生成

HTML、CSS與jQuery：實現圖片折疊展開特效的技巧 Oct 24, 2023 am 11:05 AM

HTML、CSS和jQuery：實現圖片折疊展開特效的技巧介紹在網頁設計和開發中，我們經常需要實現一些動態特效來增加頁面的吸引力和互動性。其中，圖片折疊展開特效是常見但又很有趣的技巧。透過這種特效，我們可以讓圖片在使用者的操作下折疊或展開，從而展示更多的內容或細節。本文將介紹如何使用HTML、CSS和jQuery來實現這種效果，並附上具體的程式碼範例。實現思

如何使用Vue實現進度條特效 Sep 19, 2023 am 09:22 AM

如何使用Vue實現進度條特效進度條是常見的一種介面元素，它可以用來展示一個任務或操作的完成情況。在Vue框架中，我們可以透過一些簡單的程式碼來實現進度條的特效效果。本文將介紹如何使用Vue來實現進度條特效，並提供具體程式碼範例。建立Vue元件首先，我們需要建立一個Vue元件來實現進度條的功能。在Vue中，元件是可以重複使用的，我們可以在多個地方使用。建立一個名為Pro

關閉Win10滑鼠軌跡特效的步驟 Dec 31, 2023 pm 09:53 PM

我們在使用win10系統的時候，可以進行很多個人化的設置，其中就包括滑鼠軌跡的特效，不過很多的用戶並不知道win10滑鼠軌跡特效如何關閉，為此我們帶來了詳細的方法。 win10滑鼠軌跡特效如何關閉：1、先在桌面空白處右鍵，然後點選「個人化」。 2、然後點選左側的「主題」選擇右側的「滑鼠遊標」。 3.進入屬性之後，可以看到並選擇「指標選項」。 4、然後下拉可以看到可見性，此時的√是勾選的。 5.取消勾選，再點選應用，確定即可。

Word圖片要怎麼旋轉呢 Mar 19, 2024 pm 06:16 PM

我們在使用Word辦公室軟體進行文件處理的時候，經常需要在文件裡插入一些圖片之類的素材，但是，為了排版美觀的需要，我們還需要將圖片進行一些特殊的排版，其中旋轉處理是最基本的排版處理，但是，對於一些剛接觸Word辦公室軟體的職場新人來講，可能還不太會在Word文檔裡處理圖片。下邊，我們就分享一下Word圖片怎麼旋轉的方法，希望對你有幫助和啟發。 1.首先，我們打開一個Word文檔，隨後，我們選單列點擊插入-圖片按鈕，電腦中隨意找一張圖片插入，以便於我們操作演示使用。 2、如果我們要將圖片旋轉，接著需

See all articles

純css3實作3D立方體旋轉特效程式碼

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題