CSS得意之作

我整個星期都帶挑戰性的設計和IM在我的最後一塊去抵抗，離開了一天的小時摔跤出來，CSS得意之作

我這裏

金剛石/蜂窩UI

.diamonds li { 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    -ms-perspective: 1000; 
    perspective: 1000; 
    -ms-transform: perspective(1000px); 
    -moz-transform: perspective(1000px); 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
} 
.diamond:hover .back,.diamond.hover .back { 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
} 
.diamond:hover .frontFlip,.diamond.hover .frontFlip { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

.flipper { 
    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 
    -ms-transition: 0.6s; 
    -moz-transition: 0.6s; 
    -moz-transform: perspective(1000px); 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    position: relative; 
} 
.frontFlip, .back { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transition: 0.6s; 
    -moz-transform-style: preserve-3d; 
    -o-transition: 0.6s; 
    -o-transform-style: preserve-3d; 
    -ms-transition: 0.6s; 
    -ms-transform-style: preserve-3d; 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.frontFlip { 
    -webkit-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    z-index: 2; 
} 
.back { 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -o-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
} 
.frontFlip .name { 
    font-size: 2em; 
    display: inline-block; 
    background: rgba(33, 33, 33, 0.9); 
    color: #f8f8f8; 
    font-family: Courier; 
    padding: 5px 10px; 
    border-radius: 5px; 
    bottom: 60px; 
    left: 25%; 
    position: absolute; 
    text-shadow: 0.1em 0.1em 0.05em #333; 
    display: none; 
    -webkit-transform: rotate(-20deg); 
    -moz-transform: rotate(-20deg); 
    -ms-transform: rotate(-20deg); 
    transform: rotate(-20deg); 
}

目前徘徊在鑽石內部文本使用CSS3過渡到翻轉，但轉型需要是灰色鑽石自身

任何指針在哪裏移動的CSS規則高度讚賞！

來源

2014-02-14 James Kirkby

我相信你已經看到了這個鏈接，並立足您的設計關閉它：http://cssdeck.com/labs/b1nfiuqm。不過，我注意到它看起來像沒有你的正面和背面在同一個「鰭狀肢」div中，因爲它們在那裏可能會造成問題。 http://davidwalsh.name/css-flip 是的我明白你的意思有中有兩種鰭狀肢，但它的更新還是一樣 http://jsfiddle.net/z42wg - – dpwivagg

有人受此啓發/ 31/ 我相信它的一個問題是，css3變換選擇器正在坐在 –

如果你只是想要翻轉出現在'鑽石'上。您可以將去除.diamond li箱陰影和背景上.diamonds .diamond，並把它們放在.diamond .content

/* line 118, ../sass/screen.scss */ 
.diamonds .content { 
    display: table-cell; 
    height: 190px; 
    padding: 0 10px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    text-align: center; 
    vertical-align: middle; 
    width: 190px; 
    border: 1px solid rgb(204,204,204); 
    background: #f4f4f4; 
}

見http://jsfiddle.net/z42wg/44/

來源

2014-02-14 17:12:35 bdrx

哈啊謝謝！看起來我現在想怎麼樣 http://fiddle.jshell.net/z42wg/58/ –

回答

相關問題