FontAwesomeアイコンと”rotate3d”でアニメーション

fa-spinTest
fa-spin

これは、アニメgifです

fa-spin
fa-spin

⇑上のアイコン回転は、
<p id=”fa_spin”><i class=”c_red fas fa-cog fa-spin fa-3x”></i></p>です。コードをそのまま書くと上と同様に実行されますので実行されない様に一部を全角で記載しています。

⇓ Font Awesomeのアイコンを”fa-spin“で回して 更に、”rotate3d“で3D表現

実際の記述での表示

FontAwesomeの”fa-spin”と、animation: ”rotate3d”で回転

カラー表現 #Code RGB一覧


#ColorCode順 一覧

Nocolorclasscodergbrgb
001.b3_black#000000rgb(0,0,0)000000000
002.b3_navy#000080rgb(0,0,128)000000128
003.b3_darkblue#00008brgb(0,0,139)000000139
004.b3_mediumblue#0000cdrgb(0,0,205)000000205
005.b3_blue1#0000ffrgb(0,0,255)000000255
007.b3_lapis_blue_17#004b8drgb(0,75,141)000075141
008.b3_shaded_spruce_17#005960rgb(0,89,96)000089096
236.b5_gunjyo_iro_1#005ab6rgb(0,90,214)000090214
009.b3_darkgreen#006400rgb(0,100,0)000100000
010.b3_green1#008000rgb(0,128,0)000128000
011.b3_teal1#008080rgb(0,128,128)000128128
012.b3_darkcyan#008b8brgb(0,139,139)000139139
013.b3_teal2#009688rgb(0,150,136)000150136
014.b3_cyan1#00bcd4rgb(0,188,212)000188212
015.b3_deepskyblue#00bfffrgb(0,191,255)000191255
016.b3_darkturquoise#00ced1rgb(0,206,209)000206209
017.b3_mediumspringgreen#00fa9argb(0,250,154)000250154
018.b3_lime1#00ff00rgb(0,255,0)000255000
019.b3_springgreen#00ff7frgb(0,255,127)000255127
020.b3_aqua#00ffffrgb(0,255,255)000255255
020.b3_cyan2#00ffffrgb(0,255,255)000255255
237.b5_gunjyo_iro_2#0d09a8rgb(13,9,168)013009168
021.b3_0e1b3f#0e1b3frgb(14,27,63)014027063
022.b3_0e659a#0e659argb(14,101,154)014101154
023.b3_0e9a1b#0e9a1brgb(14,154,27)014154027
024.b3_14d991#14d991rgb(20,217,145)020217145
025.b3_1634fa#1634fargb(22,52,250)022052250
026.b3_18db24#18db24rgb(24,219,36)024219036
027.b3_midnightblue#191970rgb(25,25,112)025025112
028.b3_19ff21#19ff21rgb(25,255,33)025255033
029.b3_19ffed#19ffedrgb(25,255,237)025255237
030.b3_1a26ff#1a26ffrgb(26,38,255)026038255
031.b3_1af066#1af066rgb(26,240,102)026240102
032.b3_1b52d9#1b52d9rgb(27,82,217)027082217
033.b3_1bccd9#1bccd9rgb(27,204,217)027204217
034.b3_1dbcdb#1dbcdbrgb(29,188,219)029188219
035.b3_1ddb7b#1ddb7brgb(29,219,123)029219123
036.b3_dodgerblue#1e90ffrgb(30,144,255)030144255
037.b3_1f5adb#1f5adbrgb(31,90,219)031090219
038.b3_1fb5ff#1fb5ffrgb(31,181,255)031181255
039.b3_1ff0c4#1ff0c4rgb(31,240,196)031240196
040.b3_2097f0#2097f0rgb(32,151,240)032151240
041.b3_lightseagreen#20b2aargb(32,178,170)032178170
042.b3_20fa4e#20fa4ergb(32,250,78)032250078
043.b3_20fae3#20fae3rgb(32,250,227)032250227
044.b3_212af0#212af0rgb(33,42,240)033042240
045.b3_blue2#2196F3rgb(33,150,243)033150243
046.b3_navy_peony_17#223a5ergb(34,58,94)034058094
047.b3_2283c4#2283c4rgb(34,131,196)034131196
048.b3_forestgreen#228b22rgb(34,139,34)034139034
238.b5_sea_blue#235bc8rgb(35,91,200)035091200
049.b3_23a0fa#23a0fargb(35,160,250)035160250
050.b3_2d5f9f#2d5f9frgb(45,95,159)045095159
051.b3_seagreen#2e8b57rgb(46,139,87)046139087
052.b3_darkslategray#2f4f4frgb(47,79,79)047079079
053.b3_3014db#3014dbrgb(48,20,219)048020219
054.b3_303841#303841rgb(48,56,65)048056065
239.b5_oriental_blue#3155a6rgb(49,85,166)049085166
055.b3_limegreen#32cd32rgb(50,205,50)050205050
240.b5_ruri_iro#3451a4rgb(52,81,164)052081164
056.b3_375085#375085rgb(55,80,133)055080133
057.b3_384765#384765rgb(56,71,101)056071101
058.b3_dark_gray1#3a3a3argb(58,58,58)058058058
059.b3_mediumseagreen#3cb371rgb(60,179,113)060179113
060.b3_3e4965#3e4965rgb(62,73,101)062073101
061.b3_indigo1#3f51b5rgb(63,81,181)063081181
062.b3_turquoise#40e0d0rgb(64,224,208)064224208
241.b5_gunjyo_iro_3#414fa3rgb(65,79,163)065079163
063.b3_royalblue#4169e1rgb(65,105,225)065105225
242.b5_ultra_marine#434da2rgb(67,77,162)067077162
064.b3_451ad9#451ad9rgb(69,26,217)069026217
065.b3_steelblue#4682b4rgb(70,130,180)070130180
243.b5_ultra_marine_blue#4753a2rgb(71,83,162)071083162
066.b3_darkslateblue#483d8brgb(72,61,139)072061139
067.b3_mediumturquoise#48d1ccrgb(72,209,204)072209204
244.b5_kikyou_iro#4a49adrgb(74,73,173)074073173
068.b3_indigo2#4b0082rgb(75,0,130)075000130
245.b5_gunjyo_iro_4#4c6cb3rgb(76,108,179)076108179
069.b3_green2#4caf50rgb(76,175,880)076175880
246.b5_pansy_1#4d4398rgb(77,67,152)077067152
070.b3_marina_17#4F84C4rgb(79,132,196)079132196
071.b3_51d914#51d914rgb(81,217,20)081217020
072.b3_darkolivegreen#556b2frgb(85,107,47)085107047
073.b3_niagara_17#578CA9rgb(87,140,169)087140169
247.b5_pansy_2#583f99rgb(88,63,153)088063153
074.b3_59fa1b#59fa1brgb(89,250,27)089250027
075.b3_kale_17#5a7247rgb(90,114,71)090114071
076.b3_cadetblue#5f9ea0rgb(95,158,160)095158160
077.b3_blue_gray#607d8brgb(96,125,139)096125139
078.b3_dark_gray2#616161rgb(97,97,97)097097097
079.b3_cornflowerblue#6495edrgb(100,149,237)100149237
079.b3_6495ed#6495edrgb(100,149,237)100149237
079.b3_cornflowerblue#6495edrgb(100,149,237)100149237
080.b3_rebeccapurple#663399rgb(102,51,153)102051153
081.b3_mediumaquamarine#66cdaargb(102,205,170)102205170
082.b3_tawny_port_17#672e3brgb(103,46,59)103046059
083.b3_deep_purple#673ab7rgb(103,58,183)103058183
084.b3_dimgray#696969rgb(105,105,105)105105105
085.b3_slateblue#6a5acdrgb(106,90,205)106090205
086.b3_olivedrab#6b8e23rgb(107,142,35)107142035
087.b3_6f15f0#6f15f0rgb(111,21,240)111021240
088.b3_slategray#708090rgb(112,128,144)112128144
089.b3_gray1#757575rgb(117,117,117)117117117
090.b3_lightslategray#778899rgb(119,136,153)119136153
092.b3_brown#795548rgb(121,85,72)121085072
092.b3_mediumslateblue#7b68eergb(123,104,238)123104238
093.b3_lawngreen#7cfc00rgb(124,252,0)124252000
094.b3_chartreuse#7fff00rgb(127,255,0)127255000
095.b3_aquamarine#7fffd4rgb(127,255,212)127255212
096.b3_maroon#800000rgb(128,0,0)128000000
097.b3_purple1#800080rgb(128,0,128)128000128
098.b3_olive#808000rgb(128,128,0)128128000
099.b3_gray#808080rgb(128,128,128)128128128
100.b3_808698#808698rgb(128,134,152)128134152
101.b3_light_blue#87ceebrgb(135,206,235)135206235
101.b3_skyblue#87ceebrgb(135,206,235)135206235
102.b3_lightskyblue#87cefargb(135,206,250)135206250
103.b3_neutral_gray_17#898e8crgb(137,142,140)137142140
104.b3_blueviolet#8a2be2rgb(138,43,226)138043226
105.b3_darkred#8b0000rgb(139,0,0)139000000
106.b3_darkmagenta#8b008brgb(139,0,139)139000139
107.b3_saddlebrown#8b4513rgb(139,69,19)139069019
108.b3_light_green#8bc34argb(139,195,74)139195074
109.b3_darkseagreen#8fbc8brgb(143,188,139)143188139
110.b3_9021ff#9021ffrgb(144,33,255)144033255
111.b3_lightgreen#90ee90rgb(144,238,144)144238144
112.b3_greenery_17#92B558rgb(146,181,88)146181088
113.b3_mediumpurple#9370dbrgb(147,112,219)147112219
114.b3_darkviolet#9400d3rgb(148,0,211)148000211
115.b3_island_paradise_17#95dee3rgb(149,222,227)149222227
116.b3_palegreen#98fb98rgb(152,251,152)152251152
117.b3_darkorchid#9932ccrgb(153,50,204)153050204
118.b3_yellowgreen#9acd32rgb(154,205,50)154205050
119.b3_9b0fd9#9b0fd9rgb(155,15,217)155015217
120.b3_purple2#9c27b0rgb(156,9,176)156039176
121.b3_golden_lime_17#9c9a40rgb(156,154,64)156154064
122.b3_gray2#9e9e9ergb(158,158,158)158158158
123.b3_sienna#a0522drgb(160,82,45)160082045
124.b3_brown2#a52a2argb(165,42,42)165042042
125.b3_darkgray#a9a9a9rgb(169,169,169)169169169
126.b3_aaf01b#aaf01brgb(170,240,27)170240027
127.b3_lightblue#add8e6rgb(173,216,230)173216230
128.b3_greenyellow#adff2frgb(173,255,47)173255047
129.b3_paleturquoise#afeeeergb(175,238,238)175238238
130.b3_lightsteelblue#b0c4dergb(176,196,222)176196222
131.b3_powderblue#b0e0e6rgb(176,224,230)176224230
132.b3_firebrick#b22222rgb(178,34,34)178034034
133.b3_khaki1#b4aa50rgb(180,170,80)180170080
134.b3_darkgoldenrod#b8860brgb(184,134,11)184134011
135.b3_mediumorchid#ba55d3rgb(186,85,211)186085211
136.b3_rosybrown#bc8f8frgb(188,143,143)188143143
137.b3_darkkhaki#bdb76brgb(189,183,107)189183107
138.b3_silver#c0c0c0rgb(192,192,192)192192192
139.b3_butterum_17#c48f65rgb(196,143,101)196143101
140.b3_mediumvioletred#c71585rgb(199,21,133)199021133
141.b3_indianred#cd5c5crgb(205,92,92)205092092
142.b3_peru#cd853frgb(205,133,63)205133063
143.b3_lime2#cddc39rgb(205,220,57)205220057
144.b3_pink_yellow_17#ce3175rgb(206,49,117)206049117
145.b3_hazelnut_17#cfb095rgb(207,176,149)207176149
146.b3_autumn_maple_17#d2691ergb(210,105,30)210105030
146.b3_chocolate#d2691ergb(210,105,30)210105030
147.b3_tan#d2b48crgb(210,180,140)210180140
148.b3_lightgray#d3d3d3rgb(211,211,211)211211211
149.b3_thistle#d8bfd8rgb(216,191,216)216191216
150.b3_d93211#d93211rgb(217,50,17)217050017
151.b3_d9a816#d9a816rgb(217,168,22)217168022
152.b3_orchid#da70d6rgb(218,112,214)218112214
153.b3_goldenrod#daa520rgb(218,165,32)218165032
154.b3_db166f#db166frgb(219,22,111)219022111
155.b3_palevioletred#db7093rgb(219,112,147)219112147
156.b3_db811a#db811argb(219,129,26)219129026
157.b3_dbda18#dbda18rgb(219,218,24)219218024
158.b3_crimson#dc143crgb(220,20,60)220020060
159.b3_grenadine_17#DC4C46rgb(220,76,70)220076070
160.b3_gainsboro#dcdcdcrgb(220,220,220)220220220
161.b3_plum#dda0ddrgb(221,16,221)221016221
162.b3_pale_green#ddffddrgb(221,255,221)221255221
163.b3_burlywood#deb887rgb(222,184,135)222184135
164.b3_lightcyan#e0ffffrgb(224,255,255)224255255
165.b3_lavender#e6e6fargb(230,230,250)230230250
166.b3_pink1#e91e63rgb(233,30,99)233030099
167.b3_darksalmon#e9967argb(233,150,122)233150122
168.b3_pale_dogwood_17#edcdc2rgb(237,205,194)237205194
169.b3_violet#ee82eergb(238,130,238)238130238
170.b3_palegoldenrod#eee8aargb(238,232,170)238232170
171.b3_f01c18#f01c18rgb(240,28,24)240028024
172.b3_lightcoral#f08080rgb(240,128,128)240128128
173.b3_f0a51e#f0a51ergb(240,165,30)240165030
174.b3_khaki2#f0e68crgb(240,230,140)240230140
175.b3_aliceblue#f0f8ffrgb(240,248,255)240248255
176.b3_honeydew#f0fff0rgb(240,255,240)240255240
177.b3_azure#f0ffffrgb(240,255,255)240255255
178.b3_light_gray#f1f1f1rgb(241,241,241)241241241
179.b3_flame_17#f2552crgb(242,85,44)242085044
180.b3_ballet_slipper_17#f3d6e4rgb(243,214,228)243214228
181.b3_red1#f44336rgb(244,67,54)244067054
182.b3_sandybrown#f4a460rgb(244,164,96)244164096
183.b3_wheat#f5deb3rgb(245,222,179)245222179
184.b3_beige#f5f5dcrgb(245,245,220)245245220
185.b3_whitesmoke#f5f5f5rgb(245,245,245)245245245
186.b3_mintcream#f5fffargb(245,255,250)245255250
187.b3_primrose_yellow_17#f6d155rgb(246,209,85)246209085
188.b3_f814ff#f814ffrgb(248,20,255)248020255
189.b3_ghostwhite#f8f8ffrgb(248,248,255)248248255
190.b3_fa19f0#fa19f0rgb(250,25,240)250025240
191.b3_fa721e#fa721ergb(250,114,30)250114030
192.b3_salmon#fa8072rgb(250,128,114)250128114
193.b3_fae21b#fae21brgb(250,226,27)250226027
194.b3_antiquewhite#faebd7rgb(250,235,215)250235215
195.b3_linen#faf0e6rgb(250,240,230)250240230
196.b3_lightgoldenrodyellow#fafad2rgb(250,250,210)250250210
197.b3_sand#fdf5e6rgb(253,245,230)253245230
197.b3_oldlace#fdf5e6rgb(253,245,230)253245230
198.b3_red2#ff0000rgb(255,0,0)255000000
199.b3_fuchsia#ff00ffrgb(255,0,255)255000255
199.b3_magenta#ff00ffrgb(255,0,255)255000255
200.b3_deeppink#ff1493rgb(255,20,147)255020147
201.b3_orangered#ff4500rgb(255,69,0)255069000
202.b3_deep_orange#ff5722rgb(255,87,34)255087034
203.b3_ff5f17#ff5f17rgb(255,95,23)255095023
204.b3_tomato#ff6347rgb(255,99,71)255099071
205.b3_hotpink#ff69b4rgb(255,105,180)255105180
206.b3_coral#ff7f50rgb(255,127,80)255127080
207.b3_darkorange#ff8c00rgb(255,140,0)255140000
208.b3_orange1#ff9800rgb(255,152,0)255152000
209.b3_lightsalmon#ffa07argb(255,160,122)255160122
210.b3_orange2#ffa500rgb(255,165,0)255165000
211.b3_lightpink#ffb6c1rgb(255,182,193)255182193
212.b3_pink2#ffc0cbrgb(255,192,203)255192203
213.b3_amber#ffc107rgb(255,193,7)255193007
214.b3_gold#ffd700rgb(255,215,0)255215000
215.b3_peachpuff#ffdab9rgb(255,218,185)255218185
216.b3_pale_red#ffddddrgb(255,221,221)255221221
217.b3_ffde1c#ffde1crgb(255,222,28)255222028
218.b3_navajowhite#ffdeadrgb(255,222,179)255222179
219.b3_moccasin#ffe4b5rgb(255,228,181)255228181
220.b3_bisque#ffe4c4rgb(255,228,196)255228196
221.b3_mistyrose#ffe4e1rgb(255,228,225)255228225
222.b3_yellow1#ffeb3brgb(255,235,59)255235059
223.b3_blanchedalmond#ffebcdrgb(255,235,205)255235205
224.b3_papayawhip#ffefd5rgb(255,239,213)255239213
225.b3_lavenderblush#fff0f5rgb(255,240,245)255240245
226.b3_seashell#fff5eergb(255,245,238)255245238
227.b3_cornsilk#fff8dcrgb(255,248,220)255248220
228.b3_lemonchiffon#fffacdrgb(255,250,205)255250205
229.b3_floralwhite#fffaf0rgb(255,250,240)255250240
230.b3_snow#fffafargb(255,250,250)255250250
231.b3_yellow#ffff00rgb(255,255,0)255255000
232.b3_pale_yellow2#ffffccrgb(255,255,204)255255204
233.b3_lightyellow#ffffe0rgb(255,255,224)255255224
234.b3_ivory#fffff0rgb(255,255,240)255255240
235.b3_white#ffffffrgb(255,255,255)255255255

コメント

タイトルとURLをコピーしました