3D盒子效果以及遇到的bug

阿新 • • 發佈：2018-12-10

這裡寫圖片描述

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

        body 
 {
            perspective: 1200px;
            background: gray;
        }

        ul{
            padding: 0;
            list-style: none;
            width: 200px;
            height: 200px;
            margin: 400px auto;
            position: relative;
            transition: all 20s;
            transform-style 
: preserve-3d;
            /* 在ul這裡加上opacity會有bug */
            /* opacity: 0.9; */
        }

        ul:hover {
            transform: rotateY(2700deg) rotateX(2700deg);
        }

        li {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: .7;
        } 


        li:nth-child(1) {

            transform-origin: right;
            left: -180px;
            background-color: #f00;
            transform: rotateY(90deg);
        }


        li:nth-child(2) {
            top: -180px;
            background-color: #0f0;

            transform-origin: bottom;
            transform: rotateX(-90deg);
        }

        li:nth-child(3) {
            right: -180px;
            background-color: #00f;
            transform-origin: left;
            transform: rotateY(-90deg);
        }

        li:nth-child(4){
            bottom: -180px;
            background-color: hotpink;
            transform-origin: top;
            transform: rotateX(90deg);
        }

        li:nth-child(5){
            background-color: purple;
            transform: translateZ(180px);
        }

        li:nth-child(6){

            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

頁面佈局：首先弄一個ul，放6個li標籤，利用定位將他們放在合適的位置上。
利用transform-origin定軸的位置，然後用transform的rotate旋轉至合適的位置，正面的使用平移transform的translateZ即可
最後給ul加上一個旋轉看看立體效果，要注意給body加上視距以及在ul上開啟3d效果

bug以及知識點：知識點：

如果你做了一個立體，那麼立體整體翻轉的時候是沒有3D效果的，因為瀏覽器預設沒有開啟3D效果，要開啟3D preserve-3d: 指定子元素定位在三維空間內

Bug： 1.我這個案例是想讓每個面都透明的，那麼我就想到加opacity屬性來實現，本來想加在li標籤上，結果發現錯加在ul上了，然後就發現了個bug，只要在ul上加了opacity，我的3d佈局就全沒了，通過transform旋轉的會沒有高度或者寬度，有興趣的朋友可以試著把上述程式碼註釋一下看看效果。

3D盒子效果以及遇到的bug

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

css實現3D盒子效果

origin fin courier ora 設置 blog select 5% solid -------------------------------------- 用css3的新屬性來設置3D盒子效果（chrome瀏覽器），代碼如下： ---------

關於盒子模型以及塊元素和行內元素

內邊距頁面元素 adding 分享圖片 alt pad image con bsp 　　盒子模型，盒子模型算是頁面比較經典的一個概念了，所有的頁面元素和div都能稱之為一個盒子，每個盒子都具備：內容（content），填充（padding 也稱之為內邊距），邊框（bor

jquery——解決鼠標移入移出導致盒子不停移動的bug

image ack style mage mouseout utf 解決 class box 使用mouseover()、mouseout()時會出現這樣一種情況，鼠標快速多次移入移出後這個盒子會在鼠標不動後繼續運動代碼如下： <!DOCTYPE html>

關於cordova打包vue寫的web-app時容易出現白屏以及部分BUG不能測出的問題

打包成apk說明 vue檔案修改 index.html 中必須新增<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.

[日常]總結2016年7月入職至2016年7月26號微盤所遇bug

2016年剛入職後在新浪微盤專案上所遇到的問題： 1.前端介面的程式不同版本問題，版本號在程式路徑中區分，比如2.4.2/lib/sdk/api/weipan/Client.php 2.資料夾介面的mc快取問題，使用者建立資料夾的時候會從新讀取資料庫更新MC快取 3.檔案庫和使用者庫分開，比如：使用者表

【CSS】css 盒子模型以及 box-sizing屬性

css 盒子模型以及 box-sizing屬性在標準的盒子模型下，css中 width，padding以及border的關係關於css中的width和padding以及border的關係。在css中，width和height指的是內容區域的寬度和高度，增加pad

簡單css實現3d動畫效果

知識儲備 transition: transform 10s; 過度的變形時間為10s transform-style: preserve-3d; 變形的樣式是3d變化 relative和absolute：相對定位和絕對定位 relative相對於原來文

JS 實現3D立體效果的首頁輪播圖（瞬間讓你的網站高大上，逼格滿滿）

var HR = { $: function(i) { return document.getElementById(i) }, $$: function(c

iOS開發：類似水波紋效果以及最外部圓環的實現

最近新開發的一個專案裡面需要用到水波紋效果，類似從中心往四周擴散那種，其實這種效果很常見，就是根據動畫來實現的，具體需求效果如下: 一、工具類的實現首先建立一個基於UIView的工具類，然後在這個工具類裡面實現動畫效果，具體程式碼如下

vue動畫過渡效果以及 animate.css、velocity.js的基本使用

移入移出最基本動畫 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

css3實現ps蒙版效果以及動畫，炫酷吊炸天！

css3越來越強大，使用css也可以做越來越多意想不到的效果。 css3實現了ps的蒙版效果，炫酷叼炸天的技能，必須要分享出來啊！實現原理這個動畫，其實也並不複雜。它使用background-clip實現了文字蒙版的效果，然後結合了背景圖片的animation實現瞭如上圖所示的文字蒙版動畫。

如何驗證程式是否完成，測試以及修復bug

這裡是修真院前端小課堂，每篇分享文從【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】八個方面深度解析前端知識/技能，本篇分享的是：【如何驗證程式是否完成，測試以及修復bug 】大家好，我是IT修真院北京總院第21期的學員

CSS文字樣式和CSS3文字效果以及背景

CSS文字樣式 text-indent屬性 text-indent屬性可以為特定選項的文字進行首行縮排，取值可以是長度值或百分比，它的屬性值通常使用em作為單位，text-indent: 2em

TextView的跑馬燈效果以及TextView的一些屬性

TextView應該是用的最廣的控制元件了,要是這句話不對我直播吃翔,這幾天的專案用到跑馬燈,居然忘記怎麼設定了,還要Google才能解決,看來雖然很基本的東西,但是用的少還是容易遺忘,所以我決定把它寫下來加深點印象,方便以後查詢具體效果 : 佈局檔案 <R

android自定義View之3D索引效果

效果圖：我的小霸王太卡了。最近工作比較忙，今天搞了一下午才搞出來這個效果，這種效果有很多種實現方式，最常見的應該是用貝塞爾曲線實現的。今天我們來看另一種不同的實現方式，只需要用到 canvas.scale()，有沒有很好奇是怎麼實現的呢。首先來說一下思路，只要有了思

三、降維——PCA, 3d視覺化以及R聚類

匯入資料資料使用的是iris資料包： data(iris) iris$Species <- factor(iris$Species, levels = c("Versicolor", "virginica", "setosa")) 可以使用head(iri

vue2.0tabl切換效果以及兩個class共存

tab切換效果 <ul class="fr"> <li v-for="(plantItem ,index) in plantList" :class="{clickStyle:echarIndex1==index}"

css3實現圖片3d翻轉效果

@charset: "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } img { border: none; } body {

Bootstrap：彈出框和提示框效果以及程式碼展示

前言：對於Web開發人員，彈出框和提示框的使用肯定不會陌生，比如常見的表格新增和編輯功能，一般常見的主要有兩種處理方式：行內編輯和彈出框編輯。在增加使用者體驗方面，彈出框和提示框起著重要的作用，如果你的系統有一個友好的彈出提示框，自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件，這

3D盒子效果以及遇到的bug

相關推薦