Jquery .trigger ('изменить'); установка нескольких css изменений

Question

Я хотел бы изменить дополнительный css property:value в приведенном ниже скрипте. Я хотел бы добавить top:70%;, когда выбран «повернутый текст», как мне его правильно добавить?

Я нашел несколько разных вариантов (например, $(".sw_poster_text2").css({"propertyname":"value","propertyname":"value"});, но это не работает в моем скрипте.

.trigger('change');
    $("select[data-field-id='5f01284fb2641']").change(function() {
        var transform = $(this).find('option:selected').data('wapf-label');
        if(transform == 'straight text')
            transform = 'rotate(-0deg)';
        if(transform == 'rotated text')
            transform = 'rotate(-40deg)';
        $(".sw_poster_text2").css("transform", transform);
    });  

Answer 1

css верх должен быть в пикселях, а не в процентах.

$("select[data-field-id='5f01284fb2641']").change(function() {
        var transform = $(this).find('option:selected').data('wapf-label');
        if(transform == 'straight text')
            transform = 'rotate(-0deg)';
        if(transform == 'rotated text') {
            transform = 'rotate(-40deg)';
            $(".sw_poster_text2").css({position: "absolute", top: "70px"});
        }
        $(".sw_poster_text2").css("transform", transform);
        console.log($(".sw_poster_text2").attr("style"));
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select data-field-id="5f01284fb2641">
<option data-wapf-label="straight text">Straight text</option>
<option data-wapf-label="rotated text">Rotated text</option>
</select>
<div class="sw_poster_text2">Sample text</div>
</form>

Answer 2

Если вы хорошо используете классы, вам будет проще стилизовать элемент.

$("select").change(function() {
  var transform = $(this).find('option:selected').data('wapf-label')
  var sample = $(this).siblings('.sw_poster_text2')
  sample.attr("class", "sw_poster_text2").addClass(transform);
});

.strait {
  top: inherit;
  transform: rotate(-0deg);
}

.rotated {
  position: absolute;
  top: 70%;
  transform: rotate(-40deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select data-field-id="5f01284fb2641">
    <option data-wapf-label="straight text">Straight text</option>
    <option data-wapf-label="rotated text">Rotated text</option>
  </select>
  <div class="sw_poster_text2">Sample text</div>
</form>