How to transform an element in a page using css3 transforms?

Question

i got a div that looks like this:

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

and I want to transform it like this:

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

How can i do that ?

Do you want to change the perspective too ? – Andrea Ligios Dec 17 '13 at 17:00 — Andrea Ligios, Dec 17 '13 at 17:00

SW4 · Answer 1 · 2013-12-17T16:35:07.113

3

If you wish to use CSS transforms, 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);
}

For a simpler implementation, 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;
}

edited Dec 17 '13 at 16:35

answered Dec 17 '13 at 16:23

SW4

69,876
20
132
137

1

You haven't used CSS3 transform. – AfromanJ Dec 17 '13 at 16:25
1

The OP asked to transform it, not for the specific use of transform. – SW4 Dec 17 '13 at 16:26
2

It's in the question: "How to transform an element in a page **using css3 transforms**?". But I agree with your static CSS method. – AfromanJ Dec 17 '13 at 16:28
1

Updated with a more complex way of achieving the same, with the use of transform :) – SW4 Dec 17 '13 at 16:35
1

Can't argue with that :) – AfromanJ Dec 17 '13 at 16:36

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

Divs are square elements, so you can't transform the actual bounding box of the div to be trapezoidal. However, you can play with borders and box shadows to achieve visual effects like that. See CSS3 matrix3d rectangle to trapezoid transformation for some potential help.

edited May 23 '17 at 11:48

Community

1
1

answered Dec 17 '13 at 16:23

Palpatim

9,074
35
43

score 1 · Accepted Answer · edited May 23 '17 at 12:00

1

If by "how to transform" you mean how to rotate on the x axis applying a perspective to achieve deepness, then you can do it by using CSS3 transform's perspective and 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);
}

You may wanna read this other answer too.

edited May 23 '17 at 12:00

Community

1
1

answered Dec 17 '13 at 17:09

Andrea Ligios

49,480
26
114
243

god bless you man ... that's exactly what i'm looking for! – Bounasser Abdelwahab Dec 31 '13 at 14:21

How to transform an element in a page using css3 transforms?

3 Answers3