Update Log
2023.5.30: CSS3 transform and transform-origin debugging tool is completed and online
  1. Home
  2. Webmaster's Auxiliary Tools
  3. CSS3 transform and transform-origin Debugging Tool

CSS3 transform and transform-origin Debugging Tool

This is an online debugging tool for CSS3 transform and transform-origin. You can change parameters with the slider on the left, and the preview effect will be displayed in real time on the right. At the bottom of the preview effect, the corresponding CSS3 effect code is generated, and a detailed explanation of CSS3's transform and transform-origin is also provided below the code, which is convenient for friends who need it.

Effect Setting Area

Transformation Origin

Transformation Parameters

Effect Preview Area

transform and transform-origin -Css3 Demo

Code Area

Explanation

Safari 4 Firefox3.5 Opera10.5 Chrome Internet Explorer

  • The two properties are supported by all mainstream browsers except IE, which are webkit, firefox, and opera, with the property names being -webkit-transform, -moz-transform, -o-transform;
  • transform-origin is the transformation origin, which is the point around which the element is transformed or rotated. This property only takes effect when the transform property is set;
    • Syntax: -moz-transform-origin: [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ] ?
    • transform-origin accepts two parameters, which can be specific values such as percentages, em, px, or descriptive parameters such as left, center, right, or top, center, bottom;
    • top left | left top is equivalent to ;
    • top | top center | center top is equivalent to 50%
    • right top | top right is equivalent to 100%
    • left | left center | center left is equivalent to 50%
    • center | center center is equivalent to 50% 50% (default value)
    • right | right center | center right is equivalent to 100% 50%
    • bottom left | left bottom is equivalent to 100%
    • bottom | bottom center | center bottom is equivalent to 50% 100%
    • bottom right | right bottom is equivalent to 100% 100%
  • The transform property implements some of the same functions that can be achieved with SVG. It can be used for inline (inline) elements and block (block) elements. It allows us to rotate, scale, and move elements, and it has several property value parameters:
    • rotate (rotate) allows you to rotate an object by passing a degree value;
    • scale is a scaling function that can make any element larger. It uses one or two positive and negative numbers, as well as decimals as parameters; when using one parameter, it means the scaling of the X-axis and Y-axis is the same;
    • translate is to reposition the element based on the X and Y coordinates, and when using one parameter, it means the parameters of the X-axis and Y-axis are the same;
    • skew skewing (shearing in ps), the parameter is the degree, and when using one parameter, it means the parameters of the X-axis and Y-axis are the same;
    • matrix matrix transformation, which is to reposition the element based on the X and Y coordinates, it uses 6 parameters, which are not involved in this example;