How to change only one function of CSS transform property w/ multiple functions?

Question

I have div, and the css is like below

.container {
    width: 100%;
    height: 100%;
    transition: 0.5s;
    transform-style: preserve-3d; 
    transform: rotateY(0deg) translateZ(-404.747px);
}

and now, I want use jQuery to change the transform property to

transfrom: rotateY(-40deg) translateZ(-404.747px);

if I use

$('.container').css('transform', 'rotateY(-40deg) translateZ(-404.747px)');

then 'translateZ(-404.747px)' will take action again. So, my question is how can I change the value of rotateY(), without change the 'translateZ()' ?

Well I am not sure about the real implementation BUT what you could do without having a major issue is to wrap another element around it and then apply the rotateY - if that is sufficient for you. — androidavid
– androidavid, Commented Dec 27, 2014 at 12:43

Todd · Accepted Answer · 2014-12-27 12:43:06Z

1

just plop it in the style attr!

$('.container').css('transform', 'rotateY(-40deg)');

answered Dec 27, 2014 at 12:43

Todd

5,4843 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sathish · Accepted Answer · 2014-12-27 12:51:26Z

0

<div class="container remove"></div>

.container {
    width: 100%;
    height: 100%;
    transition: 0.5s;
    transform-style: preserve-3d; 
}

.add{
transfrom: rotateY(-40deg) translateZ(-404.747px);
}

.remove{
transform: rotateY(0deg) translateZ(-404.747px);
}

$('.container').removeclass('remove');
$('.container').addclass('add');

answered Dec 27, 2014 at 12:51

Sathish

2,4601 gold badge16 silver badges27 bronze badges

2 Comments

keben hu Over a year ago

Thanks for all your answers, I found the 'translateZ(-404.747px)' will not take action agian, if I use $('.container').css('transform', 'rotateY(-40deg) translateZ(-404.747px)'); the real problem is the order of rotateY and translateZ will achieve different results. So I swap these two property, the issue solved.

try-catch-finally Over a year ago

@kebenhu, please provide your solution as an answer.

Collectives™ on Stack Overflow

How to change only one function of CSS transform property w/ multiple functions?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related