css3 flex佈局結合transform生成一個3D骰子

時間 2019-11-17

標籤 css3 css flex 佈局結合 transform 生成一個 3d 骰子欄目 CSS 简体版

原文原文鏈接

預覽地址： https://zhaohh.github.io/flex-dice/index.htmlcss

1 Flex 佈局

首先聊聊Flex 佈局，Flex 佈局又稱「彈性佈局」，任何容器均可以指定爲Flex佈局，設置Flex佈局會使得子元素的float、clear、vertical-align失效html

1.1 Flex屬性

1.1.1 flex-direction：決定項目的排列方向，默認自左向右水平排列

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默認值）：主軸爲水平方向，自左向右
row-reverse：主軸爲水平方向，自右向左
column：主軸爲垂直方向，自上向下
column-reverse：主軸爲垂直方向，自下向上git

1.1.2 flex-wrap：決定超過軸線的項目的換行的方式，默認不換行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap （默認值）：不換行
wrap ：換行，第一行在上方
wrap-reverse：換行，第一行在下方github

1.1.3 flex-flow：flex-direction和flex-wrap的簡寫形式，默認row nowrapweb
1.1.4 justify-content：決定項目在主軸的對齊方式，在flex-direction默認row狀況下水平對齊

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默認值）：左對齊
flex-end：右對齊
center ：居中
space-between：兩端對齊，項目間隔相同
space-around：每一個項目兩側的間隔相等，中間的項目會比兩邊的項目間隔多一倍佈局

1.1.5 align-items：決定項目在交叉軸上如何對齊，在flex-direction默認row狀況下垂直對齊

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：交叉軸起點對齊
flex-end：交叉軸終點對齊
center ：居中
baseline ：項目第一行文字的基線對齊
stretch（默認值）：若是項目未設置高度或設爲auto，將拉伸佔滿整個容器的高度flex

1.1.6 align-content：定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用，即項目存在多行或者多列時纔有做用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start（默認值）：交叉軸起點對齊
flex-end：交叉軸終點對齊
center ：居中
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈
space-around：每根軸線兩側的間隔都相等動畫

1.2 flex佈局的實例——骰子的六個面

大體理解了flex佈局的屬性，那就能夠藉助flex佈局實現骰子的六個面的佈局（參考阮一峯老師的教程http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）spa

1.2.1 html佈局

<div class="mf-box">
                <div class="box box1">
                    <span class="item"></span>
                </div>
                <div class="box box2">
                    <span class="item"></span>
                    <span class="item"></span>
                </div>
                <div class="box box3">
                    <span class="item"></span>
                    <span class="item"></span>
                    <span class="item"></span>
                </div>
                <div class="box box4">
                    <div class="column">
                        <span class="item"></span>
                        <span class="item"></span>
                    </div>
                    <div class="column">
                        <span class="item"></span>
                        <span class="item"></span>
                    </div>
                </div>
                <div class="box box5">
                    <div class="column">
                        <span class="item"></span>
                        <span class="item"></span>
                    </div>
                    <div class="column">
                        <span class="item"></span>
                    </div>
                    <div class="column">
                        <span class="item"></span>
                        <span class="item"></span>
                    </div>
                </div>
                <div class="box box6">
                    <div class="column">
                        <span class="item"></span>
                        <span class="item"></span>
                    </div>
                    <div class="column">
                        <span class="item"></span>
                        <span class="item"></span>
                    </div>
                    <div class="column">
                        <span class="item"></span>
                        <span class="item"></span>
                    </div>
                </div>
            </div>

1.2.2 css樣式

/*骰子點數佈局*/
.box{
    box-sizing: border-box;
    padding: 10px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #fff;
    display: flex;  
    box-shadow: 0 0 10px #000 inset;
}
.box1{
    justify-content: center;
    align-items: center;
}
.box2{
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.box3{
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
.item{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: #000;
    order: auto;
}
.box3 .item:nth-child(2){
    align-self: center;
}
.box3 .item:nth-child(3){
    align-self: flex-end;
}
.box4,.box5,.box6{
    flex-wrap: wrap;
    justify-content: space-between;
    align-content:space-between ;
}
.column{
    display: flex;
    flex-basis: 100%;
    justify-content: space-between;
}
.box5 .column:nth-child(2){
    justify-content: center;
}
.box6 .column{
    justify-content: space-around;
}

實現效果以下
3d

2 transform 3D

爲了達到骰子立體的效果，須要使用transform 3D屬性，3D空間座標系以下

2.1 transform 3D屬性

2.1.1 3D位移——translateZ()和translate3d()，translate3d(x,y,z)使一個元素在三維空間沿三維座標軸移動
2.1.2 3D旋轉——rotateX()、rotateY()和rotateZ()

X：以方框X軸，從下向上旋轉
Y：以方框y軸，從左向右旋轉
Z：以方框中心爲原點，順時針旋轉

2.1.3 3D透視——transform-style和perspective

transform-style: preserve-3d規定被嵌套元素如何在 3D 空間中顯示，若是不設置該屬性，則無3D效果。須要設置在父元素中，而且高於任何嵌套的變形元素。
perspective，規定 3D 元素的透視效果。簡單來講，perspective設置了用戶和元素3D空間Z平面之間的距離，值越小，用戶與3D空間Z平面距離越近，視覺效果越明顯；反之，值越大，用戶與3D空間Z平面距離越遠，視覺效果越不明顯。

2.2 transform 3D實例——骰子的立體效果

2.2.1 父元素，子元素定位

父元素設有transform-style屬性，position設爲relative，子元素的position設爲absolute

.mf-box{
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin: 0 auto;     
    perspective: 400px;
    transform-style: preserve-3d;
    position: relative;
    transform: rotateX(30deg)rotateY(30deg);/*旋轉必定角度方便觀察*/
}
.mf-box .box{   
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: 0.8;/*設置每一個面的透明度*/
}

2.2.2 子元素變換位置

position:absolute讓每一個面先在同一個位置，而後再rotate()旋轉translate位移。

位移的原點在元素的中心，上下兩個面沿X軸旋轉必定角度，沿Z軸位移必定像素；先後左右四個面沿Y軸旋轉必定角度，沿Z軸位移必定像素。

注意：先旋轉再位移和先位移再旋轉的結果不一樣。先旋轉再位移，位移是相對於旋轉以後的座標軸肯定位置；先位移再旋轉，位移是相對於旋轉前的座標軸肯定位置。

.mf-box .box1{
    transform: rotateY(0)translateZ(50px);
}
.mf-box .box2{
    transform: rotateY(-90deg)translateZ(50px);
}
.mf-box .box3{
    transform: rotateX(90deg)translateZ(50px);
}
.mf-box .box4{
    transform: rotateX(-90deg)translateZ(50px);
}
.mf-box .box5{
    transform: rotateY(90deg)translateZ(50px);
}
.mf-box .box6{
    transform: rotateY(180deg)translateZ(50px);
}

2.2.3 動畫效果

實現自動旋轉的動畫效果，父元素增長animation樣式

.mf-box{
    animation: rotate linear 20s infinite;
}
@-webkit-keyframes rotate{
    from{
        transform: rotateX(0deg) rotateY(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg);
    }
}

2.2.4 鼠標浮動效果

改變translateZ的值，距離再增長一倍，就能夠實現鼠標浮動到骰子上骰子六個面分開的效果。

/*鼠標滑過骰子效果*/
.mf-box:hover .box1{
    transform: rotateY(0)translateZ(100px);
}
.mf-box:hover .box2{
    transform: rotateY(-90deg)translateZ(100px);
}
.mf-box:hover .box3{
    transform: rotateX(90deg)translateZ(100px);
}
.mf-box:hover .box4{
    transform: rotateX(-90deg)translateZ(100px);
}
.mf-box:hover .box5{
    transform: rotateY(90deg)translateZ(100px);
}
.mf-box:hover .box6{
    transform: rotateY(180deg)translateZ(100px);
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。