39

誰かがこのようなスキューを達成する方法を知っていますか？

CSSの新しい変換プロパティを使用していますか？

あなたが見ることができるように、私は両方の角を歪めようとしているので、これが可能かどうか誰かが知っていますか？

4

8 に答える 8

33 
.red.box {
  background-color: red;
  transform: perspective( 600px ) rotateY( 45deg );
}

次に HTML:

<div class="box red"></div>

http://desandro.github.com/3dtransforms/docs/perspective.htmlから

于 2012-10-29T19:30:12.653 に答える
10

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>​

ChromeとFF4で動作します：http：//jsfiddle.net/rudiedirkx/349x9/

これは役立つかもしれません：http：//jsfiddle.net/rudiedirkx/349x9/2880/

そしてこれも（Erwinusのコメントから）：http ：//css-tricks.com/examples/ShapesOfCSS/

于 2011-04-30T22:04:41.017 に答える
10

Webkit 変換を意味していると思います..この URL http://www.the-art-of-web.com/css/3d-transforms/をチェックしてください。

于 2011-03-14T01:10:31.160 に答える
6

-webkit-perspectiveと-webkit-transformを一緒に使用できます。

<div style="-webkit-perspective:300;">
<div style="-webkit-transform:rotate3d(0, 1, 0, 30deg);width:200px;height:200px;background:#D73913;"></div>
</div>

これはSafariでのみ機能します。

于 2011-06-22T04:18:34.697 に答える
3

この css コードを使用します。必要に応じて数値を設定します

-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
于 2014-03-02T10:42:53.477 に答える
1

念のため、matrix 3d を使用してください。

  transform:matrix3d(
  1,0,1,0.003,
  0,1,0,0,
  0,0,1,0,
  0,0,0,1);

http://codepen.io/Logo/pen/jEMVpo

于 2014-12-24T08:03:15.447 に答える