如何使用css3轉換在頁面中轉換元素？

Question

我有一個div，看起來像這樣：

+---------+ 
|   | 
+---------+ 

，我想改變這樣的：

+---------+ 
/   \ 
+-------------+ 

我怎樣才能做到這一點？

Answer 1

如果「如何改造」你的意思是如何在應用的角度來實現深度x軸旋轉，那麼你可以通過做CSS3 transform的perspective和rotate3d：

Running example

HTML

<div class="box"> 
    Hover me  
</div> 

CSS

.box{ 
    width: 300px; 
    height: 100px; 
    background: silver; 
    font-size: 4em; 
    margin: 100px; 
} 

.box:hover{ 
    transform : perspective(400px) rotate3d(1, 0, 0, 50deg); 
} 

您也可能想要read this other answer。

Answer 2

如果你想使用CSS轉換，see here

HTML

<div class='trapezoid'></div> 

CSS

.trapezoid { 
    display: inline-block; 
    overflow: hidden; 
    margin: 0 3em; 
    /**outline: solid 1px;/**/ 
    width: 10em; 
    height: 10em; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
} 
.trapezoid:before { 
    display: block; 
    background: red; 
    content: ''; 
} 
.trapezoid:before { 
    width: 20em; height: 3em; 
    transform: rotate(-45deg) translate(-4.142em, -2.6em); 
    -webkit-transform: rotate(-45deg) translate(-4.142em, -2.6em); 
} 

對於一個簡單的實現，see this fiddle

HTML

個

<div></div> 

CSS

div { 
    border-bottom: 100px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    margin-top:30px; 
    width: 100px; 
} 

Answer 3

Div的是方形的元素，所以你不能改變的div的實際邊界框是梯形。但是，您可以玩邊框和陰影框來實現這樣的視覺效果。請參閱CSS3 matrix3d rectangle to trapezoid transformation獲取一些可能的幫助。