12/1/2021

# 2d Rectangle

## CSS 2D Transforms

I want something more accurate than the rectangle method (i.e. Just summing everything up). I could, say, use a 2D Simpson's rule by making an array with the correct weights, multiplying that by the array I want to integrate, and then summing up the result. However, I don't want to reinvent the wheel if there's already something better out there. Rectangle in AutoCAD is two-dimensional closed polyline consisting of four line segments. Tool: Rectangle tool builds rectangular 2D polyline using specified rectangle parameters (length, width, rotation angle) and type of corners (mate, chamfer or straight). Command: Rectang/Rectangle: Object: Polyline. To get the fft of the 2D signals,a direct fft is not the correct approach,as the DC components instead of lying in the center,lies at the corners.To avoid it and get the correct fft,fftshift is used. 2D shapes have sides and vertices. A vertex is a point where two or more lines meet. The plural of vertex is vertices. Let's have a look at the properties of these shapes.

CSS transforms allow you to move, rotate, scale, and skew elements.

Mouse over the element below to see a 2D transformation:

In this chapter you will learn about the following CSS property:

• `transform`

## Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
transform36.0
10.0
16.0
9.0
23.0

## CSS 2D Transforms Methods

With the CSS `transform` property you can use the following 2D transformation methods:

• `translate()`
• `rotate()`
• `scaleX()`
• `scaleY()`
• `scale()`
• `skewX()`
• `skewY()`
• `skew()`
• `matrix()`

Tip: You will learn about 3D transformations in the next chapter.

## The translate() Method

The `translate()` method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position:

### Example

Try it Yourself »

## The rotate() Method

The `rotate()` method rotates an element clockwise or counter-clockwise according to a given degree.

The following example rotates the <div> element clockwise with 20 degrees:

### Example

Try it Yourself »

Using negative values will rotate the element counter-clockwise.

The following example rotates the <div> element counter-clockwise with 20 degrees:

### Example

Try it Yourself »

## The scale() Method

The `scale()` method increases or decreases the size of an element (according to the parameters given for the width and height).

The following example increases the <div> element to be two times of its original width, and three times of its original height:

### Example

Try it Yourself »

The following example decreases the <div> element to be half of its original width and height:

### Example

Try it Yourself »

## The scaleX() Method

The `scaleX()` method increases or decreases the width of an element.

The following example increases the <div> element to be two times of its original width:

### Example

Try it Yourself »

The following example decreases the <div> element to be half of its original width:

### Example

Try it Yourself »

## The scaleY() Method

The `scaleY()` method increases or decreases the height of an element.

The following example increases the <div> element to be three times of its original height:

### Example

Try it Yourself »

The following example decreases the <div> element to be half of its original height:

### Example

Try it Yourself »

## The skewX() Method

The `skewX()` method skews an element along the X-axis by the given angle.

The following example skews the <div> element 20 degrees along the X-axis:

### Example

Try it Yourself »

## The skewY() Method

The `skewY()` method skews an element along the Y-axis by the given angle.

The following example skews the <div> element 20 degrees along the Y-axis:

### Example

Try it Yourself »

## The skew() Method

The `skew()` method skews an element along the X and Y-axis by the given angles.

The following example skews the <div> element 20 degrees along the X-axis, and 10 degrees along the Y-axis:

### Example

Try it Yourself »

If the second parameter is not specified, it has a zero value. So, the following example skews the <div> element 20 degrees along the X-axis:

### Example

Try it Yourself »

## The matrix() Method

The `matrix()` method combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.

The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

### Example

Try it Yourself »

## CSS Transform Properties

The following table lists all the 2D transform properties:

PropertyDescription
transformApplies a 2D or 3D transformation to an element
transform-originAllows you to change the position on transformed elements

## CSS 2D Transform Methods

FunctionDescription
matrix(n,n,n,n,n,n)Defines a 2D transformation, using a matrix of six values
translate(x,y)Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n)Defines a 2D translation, moving the element along the X-axis
translateY(n)Defines a 2D translation, moving the element along the Y-axis
scale(x,y)Defines a 2D scale transformation, changing the elements width and height
scaleX(n)Defines a 2D scale transformation, changing the element's width
scaleY(n)Defines a 2D scale transformation, changing the element's height
rotate(angle)Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)Defines a 2D skew transformation along the X-axis
skewY(angle)Defines a 2D skew transformation along the Y-axis

Quadrilateral just means 'four sides'
(quad means four, lateral means side).

A Quadrilateral has four-sides, it is 2-dimensional (a flat shape), closed (the lines join up), and has straight sides.

## Try it Yourself

(Also see this on Interactive Quadrilaterals)

## Properties

A quadrilateral has:

• four sides (edges)
• four vertices (corners)
• interior angles that add to 360 degrees:

Try drawing a quadrilateral, and measure the angles. They should add to 360°

## Types of Quadrilaterals

There are special types of quadrilateral:

Some types are also included in the definition of other types! For example a square, rhombus and rectangle are also parallelograms. See below for more details.

Let us look at each type in turn:

## The Rectangle

the little squares in each corner mean 'right angle'

A rectangle is a four-sided shape where every angle is a right angle (90°).

Also opposite sides are parallel and of equal length.

## The Square

the little squares in each corner mean 'right angle'

A square has equal sides (marked 's') and every angle is a right angle (90°)

Also opposite sides are parallel.

A square also fits the definition of a rectangle (all angles are 90°), and a rhombus (all sides are equal length).

## The Rhombus

A rhombus is a four-sided shape where all sides have equal length (marked 's').

Also opposite sides are parallel and opposite angles are equal.

Another interesting thing is that the diagonals (dashed lines) meet in the middle at a right angle. In other words they 'bisect' (cut in half) each other at right angles.

A rhombus is sometimes called a rhomb or a diamond.

## The Parallelogram

A parallelogram has opposite sides parallel and equal in length. Also opposite angles are equal (angles 'A' are the same, and angles 'B' are the same).

NOTE: Squares, Rectangles and Rhombuses are all Parallelograms!

### Example:

A parallelogram with:

• all sides equal and
• angles 'A' and 'B' as right angles

is a square!

## The Trapezoid (UK: Trapezium)

 Isosceles Trapezoid

A trapezoid(called a trapezium in the UK) has a pair of opposite sides parallel.

And a trapezium(called a trapezoid in the UK) is a quadrilateral with NO parallel sides:

 Trapezoid Trapezium In the US: a pair of parallel sides NO parallel sides In the UK: NO parallel sides a pair of parallel sides (the US and UK definitions are swapped over!)

An Isosceles trapezoid, as shown above, has left and right sides of equal length that join to the base at equal angles.

## The Kite

Hey, it looks like a kite (usually).

It has two pairs of sides:

Each pair is made of two equal-length sides that join up.

Also:

• the angles where the two pairs meet are equal.
• the diagonals, shown as dashed lines above, meet at a right angle.
• one of the diagonals bisects (cuts equally in half) the other.

... and that's it for the special quadrilaterals.

## Irregular Quadrilaterals

The only regular (all sides equal and all angles equal) quadrilateral is a square. So all other quadrilaterals are irregular.

## The 'Family Tree' Chart

Quadrilateral definitions are inclusive.

### Example: a square is also a rectangle.

So we include a square in the definition of a rectangle.

(We don't say 'Having all 90° angles makes it a rectangle except when all sides are equal then it is a square.')

This may seem odd, as in daily life we think of a square as not being a rectangle ... but in mathematics it is.

Using the chart below we can answer such questions as:

• Is a Square a type of Rectangle? (Yes)
• Is a Rectangle a type of Kite? (No)

## Complex Quadrilaterals

Oh Yes! when two sides cross over, we call it a 'Complex' or 'Self-Intersecting' quadrilateral, like these:

They still have 4 sides, but two sides cross over.

## 2d Rectangle Length And Width

A quadrilateral is a polygon. In fact it is a 4-sided polygon, just like a triangle is a 3-sided polygon, a pentagon is a 5-sided polygon, and so on.

## Play with Them

Now that you know the different types, you can play with the Interactive Quadrilaterals.

## Other Names

A quadrilateral can sometimes be called:

## 2d Rectangle Pictures

• a Quadrangle ('four angles'), so it sounds like 'triangle'
• a Tetragon ('four polygon'), so it sounds like 'pentagon', 'hexagon', etc.