Перемещение CSS для свойства преобразования без вращения

Мне нужно преобразовать элемент с вращением, я хочу оживить (с переходом) преобразование, но не вращение.Перемещение CSS для свойства преобразования без вращения

<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <style> 
    .transF{ 
     transform:translate3d(150px, 100px, 0px) rotateZ(-50deg); 
     transition : transform 3s linear; 
     } 
    </style> 
    <script> 
     var add = function(){ 
     $("#test").addClass("transF"); 
     } 
     var remove = function(){ 
     $("#test").removeClass("transF"); 
     } 
    </script> 
</head> 

<body> 
    <button onclick="add()">Add</button> 
    <button onclick="remove()">Remove</button> 
    <div id="test">test</div> 
</body> 

</html>

Plunkr link

источник

2017-02-03 swahi-ems

Это так странно ... Я люблю его! :) – user7393973

Вы можете изменить к этому.

<style> 
    .transF 
    { 
    transform:translate3d(150px, 100px, 0px); 
    transition : transform 3s linear; 
    } 
</style>

Просто снимите rotateZ (-50deg).

спасибо.

источник

2017-02-03 11:05:25

Мне нужно повернуть его, но без анимации –

Я не думаю, что вы можете transitionспецифическое свойство - использовать animation вместо:

одушевленныхtranslate3d
сохраняет значение rotateZ в то время как анимация происходит

Смотреть демо ниже:

var add = function() { 
 
    $("#test").addClass("transF"); 
 
} 
 
var remove = function() { 
 
    $("#test").removeClass("transF"); 
 
}

.transF { 
 
    transform: translate3d(150px, 100px, 0px) rotateZ(-50deg); 
 
    animation: translate 3s linear; 
 
} 
 
@keyframes translate { 
 
    from { 
 
    transform: translate3d(0px, 0px, 0px) rotateZ(-50deg); 
 
    } 
 
    to { 
 
    transform: translate3d(150px, 100px, 0px) rotateZ(-50deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<button onclick="add()">Add</button> 
 
<button onclick="remove()">Remove</button> 
 
<div id="test">test</div>

источник

2017-02-03 11:08:52 kukkuz

ваш код работает, но мне интересно, есть ли другое решение, потому что есть третья сторона, которая меняет div translate3d и rotateZ, поэтому я не могу сделать это статически –

Перемещение CSS для свойства преобразования без вращения

ответ

Смежные вопросы