Specification test cases
The test cases below are imported from the Turbo CSS specification.
They have been executed upon loading this page.
Origin: top
t1 origin-top
.t1.origin-top {
transform-origin: top;
}
Origin: bottom
t1 origin-bottom
.t1.origin-bottom {
transform-origin: bottom;
}
Origin: left
t1 origin-left
.t1.origin-left {
transform-origin: left;
}
Origin: right
t1 origin-right
.t1.origin-right {
transform-origin: right;
}
Origin: center
t1 origin-center
.t1.origin-center {
transform-origin: center;
}
Origin: top left
t1 origin-top-left
.t1.origin-top-left {
transform-origin: top left;
}
Origin: top center
t1 origin-top-center
.t1.origin-top-center {
transform-origin: top center;
}
Origin: top right
t1 origin-top-right
.t1.origin-top-right {
transform-origin: top right;
}
Origin: center left
t1 origin-center-left
.t1.origin-center-left {
transform-origin: center left;
}
Origin: center center
t1 origin-center-center
.t1.origin-center-center {
transform-origin: center center;
}
Origin: center right
t1 origin-center-right
.t1.origin-center-right {
transform-origin: center right;
}
Origin: bottom left
t1 origin-bottom-left
.t1.origin-bottom-left {
transform-origin: bottom left;
}
Origin: bottom center
t1 origin-bottom-center
.t1.origin-bottom-center {
transform-origin: bottom center;
}
Origin: bottom right
t1 origin-bottom-right
.t1.origin-bottom-right {
transform-origin: bottom right;
}
Origin: 10px 20px provided as unitless numbers
t1 origin-10-20
.t1.origin-10-20 {
transform-origin: 10px 20px;
}
Origin: 10px 20px provided as length values
t1 origin-10px-20px
.t1.origin-10px-20px {
transform-origin: 10px 20px;
}
Origin: 10% 20%
t1 origin-10%-20%
.t1.origin-10\%-20\% {
transform-origin: 10% 20%;
}