Front-endTools

CSS Transform 2D/3D Generator

It is a tool for simulating the execution result of trasnsform with intuitive operation.
Translate (move), rotate, scale (enlargement / reduction), skew (distortion) can be intuitively operated in 2D / 3D direction. It also supports transform-origin (rotation axis), perspective (perspective / viewpoint), perspective-origin (vanishing point).
In addition, the target element and the original X, Y, Z axes can be visually displayed.

front
back
rightSide
leftSide
top
bottom
.original-transform {
}

Style editor

Other specifications

How to use the tool

・I don't know how to use the tool.
・I want to know various ways to use it
・I want to know the details of each item
For those who like, we have prepared a video that introduces the contents and features and explains how to use it.

Please take advantage of it.

Lots more videos on Youtube!

List of generators

List of other Tools

Description of each CSS property

transform
The transform property allows an element to be transformed.
There are four main values for transform that can be specified.
  • translate
  • rotate
  • scale
  • skew
Although they can be specified individually, if they are specified in combination, separate them with a space.
Example description) transform: scale(1.1) skew(10deg);
The default value is none.
If multiple elements are specified, they are applied to the elements in the order in which they are specified.
Values other than skew can be specified in the X, Y, and Z axis directions (3D). skew can only be specified in the X and Y axis directions.
For example, to specify only the X axis for translate, the following can be specified.
Example description) transform: translateX(10px);
Each designation can also be specified as follows
translate
  • translate(X-axis travel distance, Y-axis travel distance)
  • translateX(X-axis travel distance)
  • translateY(Y-axis travel distance)
  • translateZ(Z-axis travel distance)
  • translate3d(X-axis travel distance, Y-axis travel distance, Z-axis travel distance)
scale
  • scale(Scale ratio in X-axis direction, Scale ratio in Y-axis direction)
  • scaleX(Scale ratio in X-axis direction)
  • scaleY(Scale ratio in Y-axis direction)
  • scaleZ(Scale ratio in Z-axis direction)
  • scale3d(Scale ratio in X-axis direction, Scale ratio in Y-axis direction, Scale ratio in Z-axis direction)
rotate
  • rotate(Angle of rotation)
  • rotate3d(Rotation angle about the X axis, Rotation angle about the Y axis, Rotation angle about the Z axis, Angle of rotation)
  • rotateX(Rotation angle about the X axis)
  • rotateY(Rotation angle about the Y axis)
  • rotateZ(Rotation angle about Z-axis)
skew
  • skew(Inclination angle of X axis, Inclination angle of Y axis)
  • skewX(Inclination angle of X axis)
  • skewY(Inclination angle of Y axis)
transform3d
3D expressions in CSS can be achieved by using the "translate," "rotate," and "scale" transform properties.
In particular, the "translateZ", "rotateX", "rotateY", and "scaleZ" can be specified to represent the 3D direction.
However, using the transform property alone does not give the impression of a 3D representation of 2D.
Therefore, it is necessary to specify "transform-style: preserve-3d;" on the parent element to which transform is specified. (default value is flat).
In addition, by specifying "perspective," you can specify a perspective effect.
Example description) perspective: 1000px;
The vanishing point can also be changed by specifying "perspective-origin". The default values are 50% 50% (X and Y axes, respectively).