CSS Transform with % convert from px dont work
Question
I have this code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="width:50%;height:30%;background:#65C6BB;position:absolute;transform: translate(20px,0px);"> </div> </body> </html>
I wanted to convert the CSS property ' transform ' to percentage.
I using the rule : (100 / window.innerWidth) *pixels
Just doing it my result to a Window Width of 1920 is 1.0416666666666667
If I replace it in the property CSS transform to transform: translate(1.0416666666666667%,0px);
The div will not stay in the same position. I've tried using window.document.body.offsetWidth but don't works too.
PS: with width and height is working.
Sorry for my English.
1 answers
solution1
0 2016-03-15 20:54:57
Transform using % moves the element with respect to element's size and not its parent's size. The formula should be (100 / element.offsetWidth) * pixels
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.