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

fa-spin Test
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順 一覧

No color class code rgb r g b
001 .b3_black#000000 rgb(0,0,0)000000000
002 .b3_navy#000080 rgb(0,0,128) 000000128
003 .b3_darkblue#00008b rgb(0,0,139)000000139
004 .b3_mediumblue#0000cd rgb(0,0,205)000000205
005 .b3_blue1#0000ff rgb(0,0,255)000000255
007 .b3_lapis_blue_17#004b8d rgb(0,75,141)000075141
008 .b3_shaded_spruce_17#005960 rgb(0,89,96)000089096
236 .b5_gunjyo_iro_1#005ab6 rgb(0,90,214)000090214
009 .b3_darkgreen#006400 rgb(0,100,0)000100000
010 .b3_green1#008000 rgb(0,128,0)000128000
011 .b3_teal1#008080 rgb(0,128,128)000128128
012 .b3_darkcyan#008b8b rgb(0,139,139)000139139
013 .b3_teal2#009688 rgb(0,150,136)000150136
014 .b3_cyan1#00bcd4 rgb(0,188,212)000188212
015 .b3_deepskyblue#00bfff rgb(0,191,255)000191255
016 .b3_darkturquoise#00ced1 rgb(0,206,209)000206209
017 .b3_mediumspringgreen#00fa9a rgb(0,250,154)000250154
018 .b3_lime1#00ff00 rgb(0,255,0)000255000
019 .b3_springgreen#00ff7f rgb(0,255,127)000255127
020 .b3_aqua#00ffff rgb(0,255,255)000255255
020 .b3_cyan2#00ffff rgb(0,255,255)000255255
237 .b5_gunjyo_iro_2#0d09a8 rgb(13,9,168)013009168
021 .b3_0e1b3f#0e1b3f rgb(14,27,63)014027063
022 .b3_0e659a#0e659a rgb(14,101,154)014101154
023 .b3_0e9a1b#0e9a1b rgb(14,154,27)014154027
024 .b3_14d991#14d991 rgb(20,217,145)020217145
025 .b3_1634fa#1634fa rgb(22,52,250)022052250
026 .b3_18db24#18db24 rgb(24,219,36)024219036
027 .b3_midnightblue#191970 rgb(25,25,112)025025112
028 .b3_19ff21#19ff21 rgb(25,255,33)025255033
029 .b3_19ffed#19ffed rgb(25,255,237)025255237
030 .b3_1a26ff#1a26ff rgb(26,38,255)026038255
031 .b3_1af066#1af066 rgb(26,240,102)026240102
032 .b3_1b52d9#1b52d9 rgb(27,82,217)027082217
033 .b3_1bccd9#1bccd9 rgb(27,204,217)027204217
034 .b3_1dbcdb#1dbcdb rgb(29,188,219)029188219
035 .b3_1ddb7b#1ddb7b rgb(29,219,123)029219123
036 .b3_dodgerblue#1e90ff rgb(30,144,255)030144255
037 .b3_1f5adb#1f5adb rgb(31,90,219)031090219
038 .b3_1fb5ff#1fb5ff rgb(31,181,255)031181255
039 .b3_1ff0c4#1ff0c4 rgb(31,240,196)031240196
040 .b3_2097f0#2097f0 rgb(32,151,240)032151240
041 .b3_lightseagreen#20b2aa rgb(32,178,170)032178170
042 .b3_20fa4e#20fa4e rgb(32,250,78)032250078
043 .b3_20fae3#20fae3 rgb(32,250,227)032250227
044 .b3_212af0#212af0 rgb(33,42,240)033042240
045 .b3_blue2#2196F3 rgb(33,150,243)033150243
046 .b3_navy_peony_17#223a5e rgb(34,58,94)034058094
047 .b3_2283c4#2283c4 rgb(34,131,196)034131196
048 .b3_forestgreen#228b22 rgb(34,139,34)034139034
238 .b5_sea_blue#235bc8 rgb(35,91,200)035091200
049 .b3_23a0fa#23a0fa rgb(35,160,250)035160250
050 .b3_2d5f9f#2d5f9f rgb(45,95,159)045095159
051 .b3_seagreen#2e8b57 rgb(46,139,87)046139087
052 .b3_darkslategray#2f4f4f rgb(47,79,79)047079079
053 .b3_3014db#3014db rgb(48,20,219)048020219
054 .b3_303841#303841 rgb(48,56,65)048056065
239 .b5_oriental_blue#3155a6 rgb(49,85,166)049085166
055 .b3_limegreen#32cd32 rgb(50,205,50)050205050
240 .b5_ruri_iro#3451a4 rgb(52,81,164)052081164
056 .b3_375085#375085 rgb(55,80,133)055080133
057 .b3_384765#384765 rgb(56,71,101)056071101
058 .b3_dark_gray1#3a3a3a rgb(58,58,58)058058058
059 .b3_mediumseagreen#3cb371 rgb(60,179,113)060179113
060 .b3_3e4965#3e4965 rgb(62,73,101)062073101
061 .b3_indigo1#3f51b5 rgb(63,81,181)063081181
062 .b3_turquoise#40e0d0 rgb(64,224,208)064224208
241 .b5_gunjyo_iro_3#414fa3 rgb(65,79,163)065079163
063 .b3_royalblue#4169e1 rgb(65,105,225)065105225
242 .b5_ultra_marine#434da2 rgb(67,77,162)067077162
064 .b3_451ad9#451ad9 rgb(69,26,217)069026217
065 .b3_steelblue#4682b4 rgb(70,130,180)070130180
243 .b5_ultra_marine_blue#4753a2 rgb(71,83,162)071083162
066 .b3_darkslateblue#483d8b rgb(72,61,139)072061139
067 .b3_mediumturquoise#48d1cc rgb(72,209,204)072209204
244 .b5_kikyou_iro#4a49ad rgb(74,73,173)074073173
068 .b3_indigo2#4b0082 rgb(75,0,130)075000130
245 .b5_gunjyo_iro_4#4c6cb3 rgb(76,108,179)076108179
069 .b3_green2#4caf50 rgb(76,175,880)076175880
246 .b5_pansy_1#4d4398 rgb(77,67,152)077067152
070 .b3_marina_17#4F84C4 rgb(79,132,196)079132196
071 .b3_51d914#51d914 rgb(81,217,20)081217020
072 .b3_darkolivegreen#556b2f rgb(85,107,47)085107047
073 .b3_niagara_17#578CA9 rgb(87,140,169)087140169
247 .b5_pansy_2#583f99 rgb(88,63,153)088063153
074 .b3_59fa1b#59fa1b rgb(89,250,27)089250027
075 .b3_kale_17#5a7247 rgb(90,114,71)090114071
076 .b3_cadetblue#5f9ea0 rgb(95,158,160)095158160
077 .b3_blue_gray#607d8b rgb(96,125,139)096125139
078 .b3_dark_gray2#616161 rgb(97,97,97)097097097
079 .b3_cornflowerblue#6495ed rgb(100,149,237)100149237
079 .b3_6495ed#6495ed rgb(100,149,237)100149237
079 .b3_cornflowerblue#6495ed rgb(100,149,237)100149237
080 .b3_rebeccapurple#663399 rgb(102,51,153)102051153
081 .b3_mediumaquamarine#66cdaa rgb(102,205,170)102205170
082 .b3_tawny_port_17#672e3b rgb(103,46,59)103046059
083 .b3_deep_purple#673ab7 rgb(103,58,183)103058183
084 .b3_dimgray#696969 rgb(105,105,105)105105105
085 .b3_slateblue#6a5acd rgb(106,90,205)106090205
086 .b3_olivedrab#6b8e23 rgb(107,142,35)107142035
087 .b3_6f15f0#6f15f0 rgb(111,21,240)111021240
088 .b3_slategray#708090 rgb(112,128,144)112128144
089 .b3_gray1#757575 rgb(117,117,117)117117117
090 .b3_lightslategray#778899 rgb(119,136,153)119136153
092 .b3_brown#795548 rgb(121,85,72)121085072
092 .b3_mediumslateblue#7b68ee rgb(123,104,238)123104238
093 .b3_lawngreen#7cfc00 rgb(124,252,0)124252000
094 .b3_chartreuse#7fff00 rgb(127,255,0)127255000
095 .b3_aquamarine#7fffd4 rgb(127,255,212)127255212
096 .b3_maroon#800000 rgb(128,0,0)128000000
097 .b3_purple1#800080 rgb(128,0,128)128000128
098 .b3_olive#808000 rgb(128,128,0)128128000
099 .b3_gray#808080 rgb(128,128,128)128128128
100 .b3_808698#808698 rgb(128,134,152) 128134152
101 .b3_light_blue#87ceeb rgb(135,206,235)135206235
101 .b3_skyblue#87ceeb rgb(135,206,235)135206235
102 .b3_lightskyblue#87cefa rgb(135,206,250)135206250
103 .b3_neutral_gray_17#898e8c rgb(137,142,140)137142140
104 .b3_blueviolet#8a2be2 rgb(138,43,226)138043226
105 .b3_darkred#8b0000 rgb(139,0,0)139000000
106 .b3_darkmagenta#8b008b rgb(139,0,139)139000139
107 .b3_saddlebrown#8b4513 rgb(139,69,19)139069019
108 .b3_light_green#8bc34a rgb(139,195,74)139195074
109 .b3_darkseagreen#8fbc8b rgb(143,188,139)143188139
110 .b3_9021ff#9021ff rgb(144,33,255)144033255
111 .b3_lightgreen#90ee90 rgb(144,238,144)144238144
112 .b3_greenery_17#92B558 rgb(146,181,88)146181088
113 .b3_mediumpurple#9370db rgb(147,112,219)147112219
114 .b3_darkviolet#9400d3 rgb(148,0,211)148000211
115 .b3_island_paradise_17#95dee3 rgb(149,222,227)149222227
116 .b3_palegreen#98fb98 rgb(152,251,152)152251152
117 .b3_darkorchid#9932cc rgb(153,50,204)153050204
118 .b3_yellowgreen#9acd32 rgb(154,205,50)154205050
119 .b3_9b0fd9#9b0fd9 rgb(155,15,217)155015217
120 .b3_purple2#9c27b0 rgb(156,9,176)156039176
121 .b3_golden_lime_17#9c9a40 rgb(156,154,64)156154064
122 .b3_gray2#9e9e9e rgb(158,158,158)158158158
123 .b3_sienna#a0522d rgb(160,82,45)160082045
124 .b3_brown2#a52a2a rgb(165,42,42)165042042
125 .b3_darkgray#a9a9a9 rgb(169,169,169)169169169
126 .b3_aaf01b#aaf01b rgb(170,240,27)170240027
127 .b3_lightblue#add8e6 rgb(173,216,230)173216230
128 .b3_greenyellow#adff2f rgb(173,255,47)173255047
129 .b3_paleturquoise#afeeee rgb(175,238,238)175238238
130 .b3_lightsteelblue#b0c4de rgb(176,196,222)176196222
131 .b3_powderblue#b0e0e6 rgb(176,224,230)176224230
132 .b3_firebrick#b22222 rgb(178,34,34)178034034
133 .b3_khaki1#b4aa50 rgb(180,170,80)180170080
134 .b3_darkgoldenrod#b8860b rgb(184,134,11)184134011
135 .b3_mediumorchid#ba55d3 rgb(186,85,211)186085211
136 .b3_rosybrown#bc8f8f rgb(188,143,143)188143143
137 .b3_darkkhaki#bdb76b rgb(189,183,107)189183107
138 .b3_silver#c0c0c0 rgb(192,192,192)192192192
139 .b3_butterum_17#c48f65 rgb(196,143,101)196143101
140 .b3_mediumvioletred#c71585 rgb(199,21,133)199021133
141 .b3_indianred#cd5c5c rgb(205,92,92)205092092
142 .b3_peru#cd853f rgb(205,133,63)205133063
143 .b3_lime2#cddc39 rgb(205,220,57)205220057
144 .b3_pink_yellow_17#ce3175 rgb(206,49,117)206049117
145 .b3_hazelnut_17#cfb095 rgb(207,176,149)207176149
146 .b3_autumn_maple_17#d2691e rgb(210,105,30)210105030
146 .b3_chocolate#d2691e rgb(210,105,30)210105030
147 .b3_tan#d2b48c rgb(210,180,140)210180140
148 .b3_lightgray#d3d3d3 rgb(211,211,211)211211211
149 .b3_thistle#d8bfd8 rgb(216,191,216)216191216
150 .b3_d93211#d93211 rgb(217,50,17)217050017
151 .b3_d9a816#d9a816 rgb(217,168,22)217168022
152 .b3_orchid#da70d6 rgb(218,112,214)218112214
153 .b3_goldenrod#daa520 rgb(218,165,32)218165032
154 .b3_db166f#db166f rgb(219,22,111)219022111
155 .b3_palevioletred#db7093 rgb(219,112,147)219112147
156 .b3_db811a#db811a rgb(219,129,26)219129026
157 .b3_dbda18#dbda18 rgb(219,218,24)219218024
158 .b3_crimson#dc143c rgb(220,20,60)220020060
159 .b3_grenadine_17#DC4C46 rgb(220,76,70)220076070
160 .b3_gainsboro#dcdcdc rgb(220,220,220)220220220
161 .b3_plum#dda0dd rgb(221,16,221)221016221
162 .b3_pale_green#ddffdd rgb(221,255,221)221255221
163 .b3_burlywood#deb887 rgb(222,184,135)222184135
164 .b3_lightcyan#e0ffff rgb(224,255,255)224255255
165 .b3_lavender#e6e6fa rgb(230,230,250)230230250
166 .b3_pink1#e91e63 rgb(233,30,99)233030099
167 .b3_darksalmon#e9967a rgb(233,150,122)233150122
168 .b3_pale_dogwood_17#edcdc2 rgb(237,205,194)237205194
169 .b3_violet#ee82ee rgb(238,130,238)238130238
170 .b3_palegoldenrod#eee8aa rgb(238,232,170)238232170
171 .b3_f01c18#f01c18 rgb(240,28,24)240028024
172 .b3_lightcoral#f08080 rgb(240,128,128)240128128
173 .b3_f0a51e#f0a51e rgb(240,165,30)240165030
174 .b3_khaki2#f0e68c rgb(240,230,140)240230140
175 .b3_aliceblue#f0f8ff rgb(240,248,255)240248255
176 .b3_honeydew#f0fff0 rgb(240,255,240)240255240
177 .b3_azure#f0ffff rgb(240,255,255)240255255
178 .b3_light_gray#f1f1f1 rgb(241,241,241)241241241
179 .b3_flame_17#f2552c rgb(242,85,44)242085044
180 .b3_ballet_slipper_17#f3d6e4 rgb(243,214,228)243214228
181 .b3_red1#f44336 rgb(244,67,54)244067054
182 .b3_sandybrown#f4a460 rgb(244,164,96)244164096
183 .b3_wheat#f5deb3 rgb(245,222,179)245222179
184 .b3_beige#f5f5dc rgb(245,245,220)245245220
185 .b3_whitesmoke#f5f5f5 rgb(245,245,245)245245245
186 .b3_mintcream#f5fffa rgb(245,255,250)245255250
187 .b3_primrose_yellow_17#f6d155 rgb(246,209,85)246209085
188 .b3_f814ff#f814ff rgb(248,20,255)248020255
189 .b3_ghostwhite#f8f8ff rgb(248,248,255)248248255
190 .b3_fa19f0#fa19f0 rgb(250,25,240)250025240
191 .b3_fa721e#fa721e rgb(250,114,30)250114030
192 .b3_salmon#fa8072 rgb(250,128,114)250128114
193 .b3_fae21b#fae21b rgb(250,226,27)250226027
194 .b3_antiquewhite#faebd7 rgb(250,235,215)250235215
195 .b3_linen#faf0e6 rgb(250,240,230)250240230
196 .b3_lightgoldenrodyellow#fafad2 rgb(250,250,210)250250210
197 .b3_sand#fdf5e6 rgb(253,245,230)253245230
197 .b3_oldlace#fdf5e6 rgb(253,245,230)253245230
198 .b3_red2#ff0000 rgb(255,0,0)255000000
199 .b3_fuchsia#ff00ff rgb(255,0,255)255000255
199 .b3_magenta#ff00ff rgb(255,0,255)255000255
200 .b3_deeppink#ff1493 rgb(255,20,147)255020147
201 .b3_orangered#ff4500 rgb(255,69,0)255069000
202 .b3_deep_orange#ff5722 rgb(255,87,34)255087034
203 .b3_ff5f17#ff5f17 rgb(255,95,23)255095023
204 .b3_tomato#ff6347 rgb(255,99,71)255099071
205 .b3_hotpink#ff69b4 rgb(255,105,180)255105180
206 .b3_coral#ff7f50 rgb(255,127,80)255127080
207 .b3_darkorange#ff8c00 rgb(255,140,0)255140000
208 .b3_orange1#ff9800 rgb(255,152,0)255152000
209 .b3_lightsalmon#ffa07a rgb(255,160,122)255160122
210 .b3_orange2#ffa500 rgb(255,165,0)255165000
211 .b3_lightpink#ffb6c1 rgb(255,182,193)255182193
212 .b3_pink2#ffc0cb rgb(255,192,203)255192203
213 .b3_amber#ffc107 rgb(255,193,7)255193007
214 .b3_gold#ffd700 rgb(255,215,0)255215000
215 .b3_peachpuff#ffdab9 rgb(255,218,185)255218185
216 .b3_pale_red#ffdddd rgb(255,221,221)255221221
217 .b3_ffde1c#ffde1c rgb(255,222,28)255222028
218 .b3_navajowhite#ffdead rgb(255,222,179)255222179
219 .b3_moccasin#ffe4b5 rgb(255,228,181)255228181
220 .b3_bisque#ffe4c4 rgb(255,228,196)255228196
221 .b3_mistyrose#ffe4e1 rgb(255,228,225)255228225
222 .b3_yellow1#ffeb3b rgb(255,235,59)255235059
223 .b3_blanchedalmond#ffebcd rgb(255,235,205)255235205
224 .b3_papayawhip#ffefd5 rgb(255,239,213)255239213
225 .b3_lavenderblush#fff0f5 rgb(255,240,245)255240245
226 .b3_seashell#fff5ee rgb(255,245,238)255245238
227 .b3_cornsilk#fff8dc rgb(255,248,220)255248220
228 .b3_lemonchiffon#fffacd rgb(255,250,205)255250205
229 .b3_floralwhite#fffaf0 rgb(255,250,240)255250240
230 .b3_snow#fffafa rgb(255,250,250)255250250
231 .b3_yellow#ffff00 rgb(255,255,0)255255000
232 .b3_pale_yellow2#ffffcc rgb(255,255,204)255255204
233 .b3_lightyellow#ffffe0 rgb(255,255,224)255255224
234 .b3_ivory#fffff0 rgb(255,255,240)255255240
235 .b3_white#ffffff rgb(255,255,255)255255255

コメント

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