Transform Origin
Właściwość transform-origin służy do ustalenia punktu, wokół którego następuje transformacja.
zapisy HTML – wspólne dla przykładów
<div class="hold">
<div class="item item-1-1">hello!</div>
</div>
<div class="hold">
<div class="item item-2-1">hello!</div>
</div>
od .item-1-1 do .item-1-6 i od .item-2-1 do .item-2-6
zapisy CSS – wspólne dla przykładów
.hold {
border: 1px dashed white;
width: 262px;
height: 132px;
}
.item {
background: #289DCC;
width: 260px;
height: 130px;
}
transform-origin
.item-1-1 {
transform-origin: 0 0;
transform: rotate(0deg);
}
hello!
bez transform-origin
.item-2-1 {
transform: rotate(0deg);
}
hello!
transform-origin
.item-1-2 {
transform-origin: 0 0;
transform: rotate(10deg);
}
hello!
bez transform-origin
.item-2-2 {
transform: rotate(10deg);
}
hello!
transform-origin
.item-1-3 {
transform-origin: 0 0;
transform: rotate(45deg);
}
hello!
bez transform-origin
.item-2-3 {
transform: rotate(45deg);
}
hello!
transform-origin
.item-1-4 {
transform-origin: 0 0;
transform: rotate(90deg);
}
hello!
bez transform-origin
.item-2-4 {
transform: rotate(90deg);
}
hello!
transform-origin
.item-1-5 {
transform-origin: 0 0;
transform: rotate(180deg);
}
hello!
bez transform-origin
.item-2-5 {
transform: rotate(180deg);
}
hello!
transform-origin
.item-1-6 {
transform-origin: 0 0;
transform: rotate(360deg);
}
hello!
bez transform-origin
.item-2-6 {
transform: rotate(360deg);
}
hello!