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.
.original-transform {}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 Website!
List of generators
CSS Gradation Generator
It is a generator for applying a gradation to the background.
It supports linear-gradient, radial-gradient (circular), conic-gradient (fan shape), etc. of basic (linear) gradation, and can generate gradation intuitively.
Since it also supports the specification of multiple gradations, it is also possible to generate a color that mixes multiple gradations by making the specified color of the above gradation transparent.
In the circular / fan-shaped gradation, in addition to preparing a tool for intuitively operating the center position, it is also equipped with a function that can intuitively operate the angle (deg) of the linear / fan-shaped gradation. I am.
It also supports repeated gradations.
You can also select and customize from over 70 types of samples!
CSS Button Generator
It is a high-performance automatic button generation tool that allows you to create buttons intuitively.
Background color, background gradation, button shadow (box-shadow), character shadow (text-shadow), size (width, height), border (border), rounded corners (border-radius), It corresponds to transition (animation) etc.
Since it also supports pseudo elements (before, after), mouse hover (hover), and pseudo elements after mouse hover, it is possible to generate buttons with various designs.
20 types of samples We have the above!
CSS Box Shadow Generator
A box-shadow tool that allows you to add shadows to images and elements.
You can choose from a wealth of samples and customize them.
It also supports the generation of inner shadows (inset) and multiple shadows. It also supports pseudo-elements such as before and after.
Pneumophysism samples are also available.
CSS Text Shadow Generator
It is an automatic text-shadow generation tool that can add various shadows to characters.
You can choose from a wealth of samples and customize them.
You can try various designs by supporting real-time text changes and multiple shadows.
CSS Border Generator
It is a CSS automatic generation tool for adding a border.
In addition to being able to specify up, down, left and right individually, you can also generate dotted lines, dashed lines, double lines, and three-dimensional lines (groove / ridge / isnet / outset). increase. You can also specify the preview size (width / height) and rounded corners (border-radius)
CSS Filter Generator
A css filter tool that makes it easy to implement effects on images and elements.
Blur, brightness, contrast, grayscale, hue-rotate, invert, saturation, sepia, shadow. You can specify multiple (drop-shadow) and so on.
For those who do not know how to use it, we have prepared a sample of css filter
Also, you can switch between multiple sample images and HTML elements as a preview, and upload your own image temporarily. You can also preview it!
CSS Triangle & Arrow Generator
It is a generator to create a triangle with only HTML and CSS.
Arrows are automatically generated by using CSS border. All directions of 360 degrees can be specified other than up, down, left and right
In addition to being equipped with a function for automatically calculating equilateral triangles, the colors can be changed freely.
Please use it for balloons and flowcharts.
CSS Backdrop-filter Generator
A back drop-filter tool that allows you to implement an effect behind a specified element.
Blur, brightness, contrast, grayscale, hue-rotate, invert, saturation, sepia, shadow. You can specify multiple (drop-shadow) and so on.
For those who do not know how to use it, we have prepared a sample of css filter
Also, you can switch between multiple sample images and HTML elements as a preview, and upload your own image temporarily. You can also preview it!
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.
CSS Transition Generator
A transition generator for simple animations.
Supports easing, duration, delay, etc. You can select from the samples and edit them. You can finely set the style before and after the animation, so you can use it as a simulation of transition.
You can also change the reverse playback and playback speed of the animation. You can also stop in the middle or simulate the state of the element at any elapsed time.
CSS Animation & Keyframes Generator
A tool for CSS animations. Supports easing, duration, delay, etc.
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
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 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(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(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).