-webkit-transformと@media screen について

Question

お世話になっております。
今回はcssで-webkit-transformについての問題です。@media screenを使い、スマホ版に対応するようプログラミングしてみましたがうまくいきません。
CSS

.menu-trigger,
.menu-trigger span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
}
.menu-trigger.active span:nth-of-type(2) {
	  opacity: 0;
}
@media screen and (min-device-width: 480px){
	
	.menu-trigger {
		position: relative;
		width: 30px;
		height: 20px;
		z-index:10001;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 30px;
		height: 2px;
		background-color: #000;
		border-radius: 4px;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 10px;
	}
	.menu-trigger span:nth-of-type(3) {
		top: 20px;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(10px) rotate(-45deg);
		transform: translateY(10px) rotate(-45deg);
	}
	
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(10px) rotate(45deg);
		transform: translateY(-10px) rotate(45deg);
	}
}
@media screen and (min-width: 480px) {
	.menu-trigger {
		position: relative;
		width: 30px;
		height: 20px;
		z-index:10001;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 30px;
		height: 2px;
		background-color: #000;
		border-radius: 4px;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 10px;
	}
	.menu-trigger span:nth-of-type(3) {
		top: 20px;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(10px) rotate(-45deg);
		transform: translateY(10px) rotate(-45deg);
	}
	
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(10px) rotate(45deg);
		transform: translateY(-10px) rotate(45deg);
	}
}

@media screen and (min-device-width: 0px) and (max-device-width: 480px) {
	.menu-trigger {
		position: relative;
		width: 100px;
		height: 60px;
		z-index:10001;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100px;
		height: 10px;
		background-color:#000;
		border-radius: 4px;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 30px;
	}
	.menu-trigger span:nth-of-type(3) {
		top: 60px;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(30px) rotate(-45deg);
		transform: translateY(30px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(30px) rotate(45deg);
		transform: translateY(-30px) rotate(45deg);
	}
}
@media screen and (min-width: 0px) and (max-width: 480px) {
	.menu-trigger {
		position: relative;
		width: 100px;
		height: 60px;
		z-index:10001;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 200px;
		height: 10px;
		background-color: #000;
		border-radius: 4px;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 30px;
	}
	.menu-trigger span:nth-of-type(3) {
		top: 60px;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(30px) rotate(-45deg);
		transform: translateY(30px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(30px) rotate(45deg);
		transform: translateY(-30px) rotate(45deg);
	}
}

HTML

                    <ul>
                    	<a class="menu-trigger" id="checker">
                            <span></span>
                            <span></span>
                            <span></span>
                        </a>
                    </ul>

最初ですが、
@media screen and (min-width: 0px) and (max-width: 480px)
とdiviceを記述していなかったのですが、
@media screen and (min-device-width: 0px) and (max-device-width: 480px)
と記述することで大きさはスマホの向きを変えることで表示がかわりました。
しかし、時折CSSが変更されず、縦向き表示のmenu-trigger spanが横向きにした際でも縦向きの状態ということがあり、@media screenが効きません。
なにかいい解決方法はあるでしょうか。

追記
jQuery内で-webkit-transformを変化させようとしましたが、-があるためエラーがでて反応しませんでした。
もし、jQueryで-webkit-transformを変化させることができるようでしたら、そちらを教えていただきたいです。
よろしくお願いします。

Answer 1

.css({
  '-webkit-transform': value,
  ...(略
});

これでもいいし、次のように書いてもかまいません。

.css({
  webkitTransform: value,
  ...(略
});

.css()
https://api.jquery.com/css/#css-properties

Comments

[kuroishi]

編集してみました。
$(".menu-trigger.active span:nth-of-type(1)").css({webkitTransform: 'translateY(30px) rotate(-45deg)',transform: 'translateY(30px) rotate(-45deg)'});
という感じで記述したのですが、動作しませんでした。解決方法あるでしょうか？

[x_x]

こちらの環境では動いているので、スマホ環境の問題かもしれません(検証できません)。
.css()の書かれている行は実行されているのでしょうか？

[kuroishi]

その確認方法はどのようにすればよいでしょうか？すみません、初心者です。

[x_x]

わかりやすいところの背景色を変えるとかしてみてはどうですか？

[kuroishi]

色を変えるということで、実行してみました。
$(".menu-trigger.active span:nth-of-type(3)").css({webkitTransform: 'translateY(30px) rotate(45deg)',transform: 'translateY(-30px) rotate(45deg)',backgroundColor:'#FFF'});
ですが、変化が見られませんでした。どうすればよいでしょうか。

[x_x]

回答したのは「jQueryによる-webkit-transformの変更方法」なので、そもそもスクリプトが呼ばれていないのはちょっとわからないです。

[kuroishi]

ありがとうございます。
すみません、最後にになんですが、以下のjQueryについてエラーがでたのですが、なにが間違えでしょうか。
var csscheckopacity = ("#span2").css("opacity");

[kuroishi]

追加した写真のような形でエラーがでました。

[kuroishi]

ありがとうございました！大変助かりました！

Answer 2

エラーが出ている行で$が抜けているように思います。

var csscheckopacity = $('#span2').css('opacity');

Comments

[kuroishi]

補助の質問にお答えいただきありがとうございました！
なんとか完成しそうです！