CSS3 Transform Skew

Question

CSS3 Transform Skew

Czy ktoś wie jak osiągnąć taki efekt:

Używanie nowej właściwości transform CSS?

Jak widzisz staram się przekrzywić oba zakręty, wie ktoś czy to możliwe?

37

css css-shapes transform skew

Author: Harry, 2011-03-14

Source

8 answers

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

Następnie HTML:

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

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

31

Author: Stieve Hansen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-22 20:58:14

Chyba masz na myśli transformację webkit.. proszę sprawdzić ten adres URL http://www.the-art-of-web.com/css/3d-transforms może Ci pomóc.

10

Author: JungJik Lee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-14 01:10:31

Możesz użyć-webkit-perspective i-webkit-transform razem.

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

To działa tylko w Safari.

6

Author: jz1108,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-22 04:18:34

Użyj tego kodu css. Ustaw liczby zgodnie z potrzebami

-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);

3

Author: wp student,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-02 10:42:53

Na wszelki wypadek użyj 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

1

Author: Logo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-24 08:03:15

.size{
   width: 200px;
   height: 200px;           
}
.boxContainer{
  -webkit-perspective:100;
}
.box{
  background: blue;
  -webkit-transform-origin-x:0;
  -webkit-transform: rotateY(10deg);
}


    <div class="size boxContainer">
        <div class="size box">

        </div>
    </div>

To mi pomogło.

0

Author: Isaac Alger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-18 01:18:29

2 więcej metod:

Jak widać na https://css-tricks.com/examples/ShapesOfCSS/#trapezoid możesz użyć border:
```
#box {
  border-left: 200px solid black;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  width: 0;
  height: 100px;
}
```
Ale nie może mieć treści, bo to wszystko granica.

Przykład: http://jsfiddle.net/rudiedirkx/349x9/3112/

Użyj CSS 'actual' skew ' transform:

#box {
  width: 200px;
  height: 170px;
  margin-top: 30px;
  background-color: black;
  transform: skewY(10deg);
  position: relative;
  z-index: 1; /* doesn't work? */
}
#box:before {
  content: "";
  display: block;
  width: 200px;
  height: 80px;
  position: absolute;
  bottom: -40px;
  left: 0;
  background-color: black;
  transform: skewY(-20deg);
  z-index: -1; /* doesn't work? */
}

Nie mogę jednak umieścić pseudo elementu za głównym elementem, więc pseudo faktycznie spada na Zawartość głównego elementu, jeśli w ogóle.

Przykład: http://jsfiddle.net/rudiedirkx/349x9/3113/

0

Author: Rudie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-11 22:02:06

score 10 · Accepted Answer

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>

Działa w Chrome i FF 4: http://jsfiddle.net/rudiedirkx/349x9/

To może pomóc: http://jsfiddle.net/rudiedirkx/349x9/2880/

I to też (z komentarza Erwinusa): http://css-tricks.com/examples/ShapesOfCSS/