css rotation of 2 elements with different width to remain on the same distance

I have 2 elements that I position one of them with the offsetLeft and offsetTop of the other one. When there is no rotation they position fine, but when there is rotation they are losing their position relative to each other, because they rotate around their center. Is there a way to fix this and if there is some formula can you also explain it?
Examples:http://jsfiddle.net/9t6n8dmk/8/

//firstExample without rotation

<div class ="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class ="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";



.first-element{

  background-color: black;

  height: 50px;

  width: 150px;

}

.second-element{

  background-color: red;

  height: 50px;

  width: 50px;

  position:absolute;

}



.first-element-rotation{

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top:100px;

  transform: rotate(30deg);

}

.second-element-rotation{

  background-color: red;

  height: 50px;

  width: 50px;

  position:absolute;

  transform: rotate(30deg);



}

asked Nov 23 '18 at 16:58

ivaylo

1167

Hello, in your example,you can reset transform-origin jsfiddle.net/9t6n8dmk/9 - developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

– G-Cyr
Nov 23 '18 at 17:23

Hey, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:01

add a comment |

//firstExample without rotation

<div class ="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class ="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";



.first-element{

  background-color: black;

  height: 50px;

  width: 150px;

}

.second-element{

  background-color: red;

  height: 50px;

  width: 50px;

  position:absolute;

}



.first-element-rotation{

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top:100px;

  transform: rotate(30deg);

}

.second-element-rotation{

  background-color: red;

  height: 50px;

  width: 50px;

  position:absolute;

  transform: rotate(30deg);



}

asked Nov 23 '18 at 16:58

ivaylo

1167

Hello, in your example,you can reset transform-origin jsfiddle.net/9t6n8dmk/9 - developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

– G-Cyr
Nov 23 '18 at 17:23

Hey, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:01

add a comment |

//firstExample without rotation

<div class ="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class ="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";



.first-element{

  background-color: black;

  height: 50px;

  width: 150px;

}

.second-element{

  background-color: red;

  height: 50px;

  width: 50px;

  position:absolute;

}



.first-element-rotation{

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top:100px;

  transform: rotate(30deg);

}

.second-element-rotation{

  background-color: red;

  height: 50px;

  width: 50px;

  position:absolute;

  transform: rotate(30deg);



}

asked Nov 23 '18 at 16:58

ivaylo

1167

//firstExample without rotation

<div class ="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class ="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";



.first-element{

  background-color: black;

  height: 50px;

  width: 150px;

}

.second-element{

  background-color: red;

  height: 50px;

  width: 50px;

  position:absolute;

}



.first-element-rotation{

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top:100px;

  transform: rotate(30deg);

}

.second-element-rotation{

  background-color: red;

  height: 50px;

  width: 50px;

  position:absolute;

  transform: rotate(30deg);



}

javascript html css

asked Nov 23 '18 at 16:58

ivaylo

1167

asked Nov 23 '18 at 16:58

ivaylo

1167

asked Nov 23 '18 at 16:58

ivaylo

1167

asked Nov 23 '18 at 16:58

ivaylo

1167

asked Nov 23 '18 at 16:58

ivaylo

1167

Hello, in your example,you can reset transform-origin jsfiddle.net/9t6n8dmk/9 - developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

– G-Cyr
Nov 23 '18 at 17:23

Hey, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:01

add a comment |

Hello, in your example,you can reset transform-origin jsfiddle.net/9t6n8dmk/9 - developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

– G-Cyr
Nov 23 '18 at 17:23

Hey, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:01

Hello, in your example,you can reset transform-origin jsfiddle.net/9t6n8dmk/9 - developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

– G-Cyr
Nov 23 '18 at 17:23

Hey, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:01

add a comment |

2 Answers
2

active

oldest

votes

Setting transform-origin property would help:

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";

.first-element {

  background-color: black;

  height: 50px;

  width: 150px;

}



.second-element {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

}



.first-element-rotation {

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top: 100px;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}



.second-element-rotation {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}

//firstExample without rotation

<div class="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

answered Nov 23 '18 at 17:11

Kosh Very

10.9k1925

Hello, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:00

@ivaylo, happy to help. It's not clear to me what your desired result is. Also, you can omit your JS and use CSS for positioning your elements.

– Kosh Very
Nov 23 '18 at 18:21

When I think about it there is no solution with transform-origin with 3 elements like that. The thing is the objects are dragable so I am using JS to reposition them one with another. Thanks for the help tho.

– ivaylo
Nov 23 '18 at 18:28

add a comment |

A solution may be to group the 2 objects together with a <div> element and rotate that element instead.

answered Nov 23 '18 at 17:03

bluninja1234

4310

Yes, I upvote you, I had similiar problem with the same thing and thought of it, but I have to change many other things. I have better solution for my purpose without grouping it, but it will be idial if there is a way to do this.

– ivaylo
Nov 23 '18 at 17:07

I guess I can't upvote ;/

– ivaylo
Nov 23 '18 at 17:08

@ivalo why do you need it ungrouped?

– bluninja1234
Nov 23 '18 at 17:09

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450506%2fcss-rotation-of-2-elements-with-different-width-to-remain-on-the-same-distance%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Setting transform-origin property would help:

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";

.first-element {

  background-color: black;

  height: 50px;

  width: 150px;

}



.second-element {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

}



.first-element-rotation {

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top: 100px;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}



.second-element-rotation {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}

//firstExample without rotation

<div class="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

answered Nov 23 '18 at 17:11

Kosh Very

10.9k1925

Hello, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:00

@ivaylo, happy to help. It's not clear to me what your desired result is. Also, you can omit your JS and use CSS for positioning your elements.

– Kosh Very
Nov 23 '18 at 18:21

When I think about it there is no solution with transform-origin with 3 elements like that. The thing is the objects are dragable so I am using JS to reposition them one with another. Thanks for the help tho.

– ivaylo
Nov 23 '18 at 18:28

add a comment |

Setting transform-origin property would help:

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";

.first-element {

  background-color: black;

  height: 50px;

  width: 150px;

}



.second-element {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

}



.first-element-rotation {

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top: 100px;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}



.second-element-rotation {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}

//firstExample without rotation

<div class="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

answered Nov 23 '18 at 17:11

Kosh Very

10.9k1925

Hello, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:00

@ivaylo, happy to help. It's not clear to me what your desired result is. Also, you can omit your JS and use CSS for positioning your elements.

– Kosh Very
Nov 23 '18 at 18:21

When I think about it there is no solution with transform-origin with 3 elements like that. The thing is the objects are dragable so I am using JS to reposition them one with another. Thanks for the help tho.

– ivaylo
Nov 23 '18 at 18:28

add a comment |

Setting transform-origin property would help:

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";

.first-element {

  background-color: black;

  height: 50px;

  width: 150px;

}



.second-element {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

}



.first-element-rotation {

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top: 100px;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}



.second-element-rotation {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}

//firstExample without rotation

<div class="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

answered Nov 23 '18 at 17:11

Kosh Very

10.9k1925

Setting transform-origin property would help:

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";

.first-element {

  background-color: black;

  height: 50px;

  width: 150px;

}



.second-element {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

}



.first-element-rotation {

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top: 100px;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}



.second-element-rotation {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}

//firstExample without rotation

<div class="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";

.first-element {

  background-color: black;

  height: 50px;

  width: 150px;

}



.second-element {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

}



.first-element-rotation {

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top: 100px;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}



.second-element-rotation {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}

//firstExample without rotation

<div class="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

let firstElement = document.getElementById("first-element");

let secondElement = document.getElementById("second-element");



secondElement.style.top = firstElement.offsetTop + "px";

secondElement.style.left = firstElement.offsetLeft + "px";





let firstElementRotation = document.getElementById("first-element-rotation");

let secondElementRotation = document.getElementById("second-element-rotation");



secondElementRotation.style.top = firstElementRotation.offsetTop + "px";

secondElementRotation.style.left = firstElementRotation.offsetLeft + "px";

.first-element {

  background-color: black;

  height: 50px;

  width: 150px;

}



.second-element {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

}



.first-element-rotation {

  background-color: black;

  height: 50px;

  width: 150px;

  margin-top: 100px;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}



.second-element-rotation {

  background-color: red;

  height: 50px;

  width: 50px;

  position: absolute;

  transform-origin: 0 100%;

  transform: rotate(30deg);

}

//firstExample without rotation

<div class="first-element" id="first-element">



</div>

<div class="second-element" id="second-element">



</div>



//secondExample with rotation

<div class="first-element-rotation" id="first-element-rotation">



</div>

<div class="second-element-rotation" id="second-element-rotation">



</div>

answered Nov 23 '18 at 17:11

Kosh Very

10.9k1925

answered Nov 23 '18 at 17:11

Kosh Very

10.9k1925

answered Nov 23 '18 at 17:11

Kosh Very

10.9k1925

answered Nov 23 '18 at 17:11

Kosh Very

10.9k1925

Hello, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:00

@ivaylo, happy to help. It's not clear to me what your desired result is. Also, you can omit your JS and use CSS for positioning your elements.

– Kosh Very
Nov 23 '18 at 18:21

When I think about it there is no solution with transform-origin with 3 elements like that. The thing is the objects are dragable so I am using JS to reposition them one with another. Thanks for the help tho.

– ivaylo
Nov 23 '18 at 18:28

add a comment |

Hello, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:00

@ivaylo, happy to help. It's not clear to me what your desired result is. Also, you can omit your JS and use CSS for positioning your elements.

– Kosh Very
Nov 23 '18 at 18:21

When I think about it there is no solution with transform-origin with 3 elements like that. The thing is the objects are dragable so I am using JS to reposition them one with another. Thanks for the help tho.

– ivaylo
Nov 23 '18 at 18:28

Hello, yes thank you. There is one problem for me with that solution. I am not familiar with transform-origin (I will look more into it). I have one more element that I position in the middle and when I set "transform-origin: 0 100%" it goes out of position. Is there a way to set it also with transform-origin so it doesn't move? jsfiddle.net/9t6n8dmk/21

– ivaylo
Nov 23 '18 at 18:00

@ivaylo, happy to help. It's not clear to me what your desired result is. Also, you can omit your JS and use CSS for positioning your elements.

– Kosh Very
Nov 23 '18 at 18:21

When I think about it there is no solution with transform-origin with 3 elements like that. The thing is the objects are dragable so I am using JS to reposition them one with another. Thanks for the help tho.

– ivaylo
Nov 23 '18 at 18:28

add a comment |

A solution may be to group the 2 objects together with a <div> element and rotate that element instead.

answered Nov 23 '18 at 17:03

bluninja1234

4310

Yes, I upvote you, I had similiar problem with the same thing and thought of it, but I have to change many other things. I have better solution for my purpose without grouping it, but it will be idial if there is a way to do this.

– ivaylo
Nov 23 '18 at 17:07

I guess I can't upvote ;/

– ivaylo
Nov 23 '18 at 17:08

@ivalo why do you need it ungrouped?

– bluninja1234
Nov 23 '18 at 17:09

add a comment |

A solution may be to group the 2 objects together with a <div> element and rotate that element instead.

answered Nov 23 '18 at 17:03

bluninja1234

4310

Yes, I upvote you, I had similiar problem with the same thing and thought of it, but I have to change many other things. I have better solution for my purpose without grouping it, but it will be idial if there is a way to do this.

– ivaylo
Nov 23 '18 at 17:07

I guess I can't upvote ;/

– ivaylo
Nov 23 '18 at 17:08

@ivalo why do you need it ungrouped?

– bluninja1234
Nov 23 '18 at 17:09

add a comment |

A solution may be to group the 2 objects together with a <div> element and rotate that element instead.

answered Nov 23 '18 at 17:03

bluninja1234

4310

A solution may be to group the 2 objects together with a <div> element and rotate that element instead.

answered Nov 23 '18 at 17:03

bluninja1234

4310

answered Nov 23 '18 at 17:03

bluninja1234

4310

answered Nov 23 '18 at 17:03

bluninja1234

4310

answered Nov 23 '18 at 17:03

bluninja1234

4310

Yes, I upvote you, I had similiar problem with the same thing and thought of it, but I have to change many other things. I have better solution for my purpose without grouping it, but it will be idial if there is a way to do this.

– ivaylo
Nov 23 '18 at 17:07

I guess I can't upvote ;/

– ivaylo
Nov 23 '18 at 17:08

@ivalo why do you need it ungrouped?

– bluninja1234
Nov 23 '18 at 17:09

add a comment |

Yes, I upvote you, I had similiar problem with the same thing and thought of it, but I have to change many other things. I have better solution for my purpose without grouping it, but it will be idial if there is a way to do this.

– ivaylo
Nov 23 '18 at 17:07

I guess I can't upvote ;/

– ivaylo
Nov 23 '18 at 17:08

@ivalo why do you need it ungrouped?

– bluninja1234
Nov 23 '18 at 17:09

Yes, I upvote you, I had similiar problem with the same thing and thought of it, but I have to change many other things. I have better solution for my purpose without grouping it, but it will be idial if there is a way to do this.

– ivaylo
Nov 23 '18 at 17:07

I guess I can't upvote ;/

– ivaylo
Nov 23 '18 at 17:08

@ivalo why do you need it ungrouped?

– bluninja1234
Nov 23 '18 at 17:09

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk