mozilla

Compare Revisions

transform-origin

Change Revisions

Revision 361481:

Revision 361481 by teoli on

Revision 383189:

Revision 383189 by jimbones on

Title:
transform-origin
transform-origin
Slug:
CSS/transform-origin
CSS/transform-origin
Tags:
"css", "CSS Reference", "CSS Transforms"
"css", "CSS Reference", "CSS Transforms"
Content:

Revision 361481
Revision 383189
n161            <div style="margin:0.5em; width:3em; height:3em; bordn161            <div style="margin:0.5em; width:3em; height:3em; bord
>er-style:solid 1px; background-color:palegreen;transform: none;">>er-style:solid 1px; background-color:palegreen;transform: none;-w
 >ebkit-transform: none;-moz-transform: none;-ms-transform: none;-o
 >-transform: none;">
n171            <div style="margin:0.5em; width:3em; height:3em; bordn171            <div style="margin:0.5em; width:3em; height:3em; bord
>er-style:solid 1px; background-color:palegreen;transform: rotate(>er-style:solid 1px; background-color:palegreen;transform: rotate(
>30deg);">>30deg);-webkit-transform: rotate(30deg);-moz-transform: rotate(30
 >deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);">
n182            <div style="margin:0.5em; width:3em; height:3em; bordn182            <div style="margin:0.5em; width:3em; height:3em; bord
>er-style:solid 1px; background-color:palegreen;transform: rotate(>er-style:solid 1px; background-color:palegreen;transform: rotate(
>30deg);transform-origin: 0 0;">>30deg);-webkit-transform: rotate(30deg);-moz-transform: rotate(30
 >deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);tra
 >nsform-origin: 0 0;-webkit-transform-origin: 0 0;-moz-transform-o
 >rigin: 0 0;-ms-transform-origin: 0 0;-o-transform-origin: 0 0;">
n193            <div style="margin:0.5em; width:3em; height:3em; bordn193            <div style="margin:0.5em; width:3em; height:3em; bord
>er-style:solid 1px; background-color:palegreen;transform: rotate(>er-style:solid 1px; background-color:palegreen;transform: rotate(
>30deg);transform-origin: 100% 100%;">>30deg);-webkit-transform: rotate(30deg);-moz-transform: rotate(30
 >deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);tra
 >nsform-origin: 100% 100%;-webkit-transform-origin: 100% 100%;-moz
 >-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;-o-t
 >ransform-origin: 100% 100%;">
n204            <div style="margin:0.5em; width:3em; height:3em; bordn204            <div style="margin:0.5em; width:3em; height:3em; bord
>er-style:solid 1px; background-color:palegreen;transform: rotate(>er-style:solid 1px; background-color:palegreen;transform: rotate(
>30deg);transform-origin: -10em -30em;">>30deg);-webkit-transform: rotate(30deg);-moz-transform: rotate(30
 >deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);tra
 >nsform-origin: -10em -30em;-webkit-transform-origin: -10em -30em;
 >-moz-transform-origin: -10em -30em;-ms-transform-origin: -10em -3
 >0em;-o-transform-origin: -10em -30em;">
n214            <div style="margin:0.5em; width:3em; height:3em; bordn214            <div style="margin:0.5em; width:3em; height:3em; bord
>er-style:solid 1px; background-color:palegreen;transform: scale(1>er-style:solid 1px; background-color:palegreen;transform: scale(1
>.9);">>.9);-webkit-transform: scale(1.9);-moz-transform: scale(1.9);-ms-
 >transform: scale(1.9);-o-transform: scale(1.9);">
n225            <div style="margin:0.5em; width:3em; height:3em; bordn225            <div style="margin:0.5em; width:3em; height:3em; bord
>er-style:solid 1px; background-color:palegreen;transform: scale(1>er-style:solid 1px; background-color:palegreen;transform: scale(1
>.9);transform-origin: 0 0;">>.9);-webkit-transform: scale(1.9);-moz-transform: scale(1.9);-ms-
 >transform: scale(1.9);-o-transform: scale(1.9);transform-origin: 
 >0 0;-webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;-ms-
 >transform-origin: 0 0;-o-transform-origin: 0 0;">
n236            <div style="margin:0.5em; width:3em; height:3em; bordn236            <div style="margin:0.5em; width:3em; height:3em; bord
>er-style:solid 1px; background-color:palegreen;transform: scale(1>er-style:solid 1px; background-color:palegreen;transform: scale(1
>.9);transform-origin: 100% -30%;">>.9);-webkit-transform: scale(1.9);-moz-transform: scale(1.9);-ms-
 >transform: scale(1.9);-o-transform: scale(1.9);transform-origin: 
 >100% -30%;-webkit-transform-origin: 100% -30%;-moz-transform-orig
 >in: 100% -30%;-ms-transform-origin: 100% -30%;-o-transform-origin
 >: 100% -30%;">
n246            <div style="margin:0.5em; width:3em; height:3em; bordn246            <div style="margin:0.5em; width:3em; height:3em; bord
>er-style:solid 1px; background-color:palegreen;transform: skewX(5>er-style:solid 1px; background-color:palegreen;transform: skewX(5
>0deg)">>0deg);-webkit-transform: skewX(50deg);-moz-transform: skewX(50deg
 >);-ms-transform: skewX(50deg);-o-transform: skewX(50deg);">
t257            <div style="margin:0.5em; width:3em; height:3em; bordt257            <div style="margin:0.5em; width:3em; height:3em; bord
>er-style:solid 1px; background-color:palegreen;transform: skewY(5>er-style:solid 1px; background-color:palegreen;transform: skewX(5
>0deg);transform-origin: 0 0">>0deg);-webkit-transform: skewX(50deg);-moz-transform: skewX(50deg
 >);-ms-transform: skewX(50deg);-o-transform: skewX(50deg);transfor
 >m-origin: 0 0;-webkit-transform-origin: 0 0;-moz-transform-origin
 >: 0 0;-ms-transform-origin: 0 0;-o-transform-origin: 0 0;">

Back to History