回答編集履歴

4

訂正

2015/09/08 03:19

投稿

退会済みユーザー
test CHANGED
@@ -10,7 +10,43 @@
10
10
 
11
11
 
12
12
 
13
- **※検証方法に誤りがあり、訂正**
13
+ **※2015.9.8 12:12 検証方法に誤りがあり、訂正しました。**
14
+
15
+
16
+
17
+ ポイントとなる箇所しか記述しませんが、それぞれ実行結果が異なります。
18
+
19
+
20
+
21
+ ```
22
+
23
+ .skew:hover {
24
+
25
+ transform:skew(30deg,30deg);
26
+
27
+ }
28
+
29
+ .skewXY:hover {
30
+
31
+ transform:skewX(30deg) skewY(30deg);
32
+
33
+ }
34
+
35
+ .skewYX:hover {
36
+
37
+ transform:skewY(30deg) skewX(30deg);
38
+
39
+ }
40
+
41
+ ```
42
+
43
+
44
+
45
+ ![イメージ説明](481c4f48100cb6aa69107ddb46dced19.png)
46
+
47
+
48
+
49
+ 指定順により、実行結果が異なりますので注意してください。
14
50
 
15
51
 
16
52
 

3

訂正

2015/09/08 03:19

投稿

退会済みユーザー
test CHANGED
@@ -10,93 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- skew()関数で指定する場合と、skewX()関数とskewY()関数の2つを使って指定した場合は実行結果が異なります。
14
-
15
-
16
-
17
- ```
18
-
19
-
20
-
21
- .skew, .skewXY, .skewYX {
22
-
23
- width:100px;
24
-
25
- height:100px;
26
-
27
- background:rgba(18,132,129,0.8);
28
-
29
- }
30
-
31
-
32
-
33
- .skew {
34
-
35
- }
36
-
37
- .skew:hover {
38
-
39
- transform:skew(30deg,30deg);
40
-
41
- }
42
-
43
-
44
-
45
- .skewXY {
46
-
47
- }
48
-
49
- .skewXY:hover {
50
-
51
- transform:skewX(30deg);
52
-
53
- transform:skewY(30deg);
54
-
55
- }
56
-
57
-
58
-
59
- .skewYX {
60
-
61
- }
62
-
63
- .skewYX:hover {
64
-
65
- transform:skewY(30deg);
66
-
67
- transform:skewX(30deg);
68
-
69
- }
70
-
71
-
72
-
73
- ```
74
-
75
-
76
-
77
- 必要最低限のCSSしか記述しませんが、上記のように記述した結果は下記になります。
78
-
79
-
80
-
81
- ![イメージ説明](755ef8505cb456dcb01d3e450cea8843.png)
82
-
83
-
84
-
85
- 背景の赤は基の形です。
86
-
87
-
88
-
89
- 結果の通り、それぞれ異なります。
13
+ **※検証方法に誤があり訂正中**
90
-
91
-
92
-
93
- クラスskewはXとYの両方が変形します。
94
-
95
- クラスskewXYとクラスskewYXは最後に記述した傾斜しか変形しません。
96
-
97
-
98
-
99
- 検証の結果、上記のようにそれぞれ異なる結果となりました。
100
14
 
101
15
 
102
16
 

2

加筆・訂正

2015/09/08 03:08

投稿

退会済みユーザー
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- skew()関数で指定する場合と、skewX()関数とskewY()関数指定した場合は実行結果が異なります。
13
+ skew()関数で指定する場合と、skewX()関数とskewY()関数の2つを使って指定した場合は実行結果が異なります。
14
14
 
15
15
 
16
16
 
@@ -110,6 +110,6 @@
110
110
 
111
111
  どこの軸に対して指定した角度で傾斜するか詳しくはわかりませんが、
112
112
 
113
- 結果推測するには、skewXの場合はX軸方向に変形(傾斜)がかかり、
113
+ 結果から推測する、skewXの場合はX軸方向に変形(傾斜)がかかり、
114
114
 
115
115
  skewYの場合はY軸方向に変形(傾斜)がかかるようです。

1

加筆・訂正

2015/09/08 01:51

投稿

退会済みユーザー
test CHANGED
@@ -1,3 +1,11 @@
1
+ 質問者です。
2
+
3
+
4
+
5
+ この質問は、think49さんのお陰で解決しましたが、検証結果を回答に投稿します。
6
+
7
+
8
+
1
9
  Google Chrome ver45 で検証した結果です。
2
10
 
3
11