CSS3变形倾斜 [英] CSS3 Transform Skew

问题描述

有人知道如何实现这样的倾斜：

使用CSS的新变换属性？

正如您所看到的，

pre> #box {
width：200px;
height：200px;
background：black;
position：relative;
-webkit-transition：all 300ms ease-in;
}
#box：hover {
-webkit-transform：rotate（-180deg）scale（0.8）;
}
#box：after，#box：before {
display：block;
content：\0020;
color：transparent;
width：211px;
height：45px
background：white;
position：absolute;
left：1px;
bottom：-20px;
-webkit-transform：rotate（-12deg）;
-moz-transform：rotate（-12deg）;
}
#box：before {
bottom：auto;
top：-20px;
-webkit-transform：rotate（12deg）;
-moz-transform：rotate（12deg）;
}


HTML：

 < div id = box>< / div> 
  

适用于Chrome和FF 4： http://jsfiddle.net/rudiedirkx/349x9/

这可能有助于： http：// jsfiddle .net / rudiedirkx / 349x9 / 2880 /

此外（来自Erwinus的评论）： http://css-tricks.com/examples/ShapesOfCSS/

Does anyone know how to achieve skew like this:

Using CSS's new transform property?

As you can see I'm trying to skew both corners, anyone know if this is possible?

解决方案

CSS:

#box {
    width: 200px;
    height: 200px;
    background: black;
    position: relative;
    -webkit-transition: all 300ms ease-in;
}
#box:hover {
    -webkit-transform: rotate(-180deg) scale(0.8);
}
#box:after, #box:before {
    display: block;
    content: "\0020";
    color: transparent;
    width: 211px;
    height: 45px;
    background: white;
    position: absolute;
    left: 1px;
    bottom: -20px;
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
}
#box:before {
    bottom: auto;
    top: -20px;
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
}​

HTML:

<div id=box></div>​

Works in Chrome and FF 4: http://jsfiddle.net/rudiedirkx/349x9/

This might help: http://jsfiddle.net/rudiedirkx/349x9/2880/

And this too (from Erwinus' comment): http://css-tricks.com/examples/ShapesOfCSS/

这篇关于CSS3变形倾斜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！