Rotate

Set the rotation for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

ro-0

rotate: 0;

ro-1

rotate: 5deg;

ro-2

rotate: 10deg;

ro-3

rotate: 15deg;

ro-4

rotate: 20deg;

ro-5

rotate: 25deg;

ro-6

rotate: 30deg;

ro-7

rotate: 35deg;

ro-8

rotate: 40deg;

ro-9

rotate: 45deg;

ro-10

rotate: 50deg;

ro-11

rotate: 55deg;

ro-12

rotate: 60deg;

ro-13

rotate: 65deg;

ro-14

rotate: 70deg;

ro-15

rotate: 75deg;

ro-16

rotate: 80deg;

ro-17

rotate: 85deg;

ro-18

rotate: 90deg;

ro-19

rotate: 95deg;

ro-20

rotate: 100deg;

ro-21

rotate: 105deg;

ro-22

rotate: 110deg;

ro-23

rotate: 115deg;

ro-24

rotate: 120deg;

ro-25

rotate: 125deg;

ro-26

rotate: 130deg;

ro-27

rotate: 135deg;

ro-28

rotate: 140deg;

ro-29

rotate: 145deg;

ro-30

rotate: 150deg;

ro-31

rotate: 155deg;

ro-32

rotate: 160deg;

ro-33

rotate: 165deg;

ro-34

rotate: 170deg;

ro-35

rotate: 175deg;

ro-36

rotate: 180deg;

ro-37

rotate: 185deg;

ro-38

rotate: 190deg;

ro-39

rotate: 195deg;

ro-40

rotate: 200deg;

ro-41

rotate: 205deg;

ro-42

rotate: 210deg;

ro-43

rotate: 215deg;

ro-44

rotate: 220deg;

ro-45

rotate: 225deg;

ro-46

rotate: 230deg;

ro-47

rotate: 235deg;

ro-48

rotate: 240deg;

ro-49

rotate: 245deg;

ro-50

rotate: 250deg;

ro-51

rotate: 255deg;

ro-52

rotate: 260deg;

ro-53

rotate: 265deg;

ro-54

rotate: 270deg;

ro-55

rotate: 275deg;

ro-56

rotate: 280deg;

ro-57

rotate: 285deg;

ro-58

rotate: 290deg;

ro-59

rotate: 295deg;

ro-60

rotate: 300deg;

ro-61

rotate: 305deg;

ro-62

rotate: 310deg;

ro-63

rotate: 315deg;

ro-64

rotate: 320deg;

ro-65

rotate: 325deg;

ro-66

rotate: 330deg;

ro-67

rotate: 335deg;

ro-68

rotate: 340deg;

ro-69

rotate: 345deg;

ro-70

rotate: 350deg;

ro-71

rotate: 355deg;

ro-72

rotate: 360deg;

ro-73

rotate: 365deg;

ro-74

rotate: 370deg;

ro-75

rotate: 375deg;

ro-76

rotate: 380deg;

ro-77

rotate: 385deg;

ro-78

rotate: 390deg;

ro-79

rotate: 395deg;

ro-80

rotate: 400deg;

ro-81

rotate: 405deg;

ro-82

rotate: 410deg;

ro-83

rotate: 415deg;

ro-84

rotate: 420deg;

ro-85

rotate: 425deg;

ro-86

rotate: 430deg;

ro-87

rotate: 435deg;

ro-88

rotate: 440deg;

ro-89

rotate: 445deg;

ro-90

rotate: 450deg;

ro-91

rotate: 455deg;

ro-92

rotate: 460deg;

ro-93

rotate: 465deg;

ro-94

rotate: 470deg;

ro-95

rotate: 475deg;

ro-96

rotate: 480deg;

ro-97

rotate: 485deg;

ro-98

rotate: 490deg;

ro-99

rotate: 495deg;

ro-100

rotate: 500deg;

ro-101

rotate: 505deg;

ro-102

rotate: 510deg;

ro-103

rotate: 515deg;

ro-104

rotate: 520deg;

ro-105

rotate: 525deg;

ro-106

rotate: 530deg;

ro-107

rotate: 535deg;

ro-108

rotate: 540deg;

ro-109

rotate: 545deg;

ro-110

rotate: 550deg;

ro-111

rotate: 555deg;

ro-112

rotate: 560deg;

ro-113

rotate: 565deg;

ro-114

rotate: 570deg;

ro-115

rotate: 575deg;

ro-116

rotate: 580deg;

ro-117

rotate: 585deg;

ro-118

rotate: 590deg;

ro-119

rotate: 595deg;

ro-120

rotate: 600deg;

ro-121

rotate: 605deg;

ro-122

rotate: 610deg;

ro-123

rotate: 615deg;

ro-124

rotate: 620deg;

ro-125

rotate: 625deg;

ro-126

rotate: 630deg;

ro-127

rotate: 635deg;

ro-128

rotate: 640deg;

ro-129

rotate: 645deg;

ro-130

rotate: 650deg;

ro-131

rotate: 655deg;

ro-132

rotate: 660deg;

ro-133

rotate: 665deg;

ro-134

rotate: 670deg;

ro-135

rotate: 675deg;

ro-136

rotate: 680deg;

ro-137

rotate: 685deg;

ro-138

rotate: 690deg;

ro-139

rotate: 695deg;

ro-140

rotate: 700deg;

ro-141

rotate: 705deg;

ro-142

rotate: 710deg;

ro-143

rotate: 715deg;

ro-144

rotate: 720deg;

ro-145

rotate: 725deg;

ro-146

rotate: 730deg;

ro-147

rotate: 735deg;

ro-148

rotate: 740deg;

ro-149

rotate: 745deg;

ro-150

rotate: 750deg;

ro-151

rotate: 755deg;

ro-152

rotate: 760deg;

ro-153

rotate: 765deg;

ro-154

rotate: 770deg;

ro-155

rotate: 775deg;

ro-156

rotate: 780deg;

ro-157

rotate: 785deg;

ro-158

rotate: 790deg;

ro-159

rotate: 795deg;

ro-160

rotate: 800deg;

ro-161

rotate: 805deg;

ro-162

rotate: 810deg;

ro-163

rotate: 815deg;

ro-164

rotate: 820deg;

ro-165

rotate: 825deg;

ro-166

rotate: 830deg;

ro-167

rotate: 835deg;

ro-168

rotate: 840deg;

ro-169

rotate: 845deg;

ro-170

rotate: 850deg;

ro-171

rotate: 855deg;

ro-172

rotate: 860deg;

ro-173

rotate: 865deg;

ro-174

rotate: 870deg;

ro-175

rotate: 875deg;

ro-176

rotate: 880deg;

ro-177

rotate: 885deg;

ro-178

rotate: 890deg;

ro-179

rotate: 895deg;

ro-180

rotate: 900deg;

ro-181

rotate: 905deg;

ro-182

rotate: 910deg;

ro-183

rotate: 915deg;

ro-184

rotate: 920deg;

ro-185

rotate: 925deg;

ro-186

rotate: 930deg;

ro-187

rotate: 935deg;

ro-188

rotate: 940deg;

ro-189

rotate: 945deg;

ro-190

rotate: 950deg;

ro-191

rotate: 955deg;

ro-192

rotate: 960deg;

ro-193

rotate: 965deg;

ro-194

rotate: 970deg;

ro-195

rotate: 975deg;

ro-196

rotate: 980deg;

ro-197

rotate: 985deg;

ro-198

rotate: 990deg;

ro-199

rotate: 995deg;

ro-200

rotate: 1000deg;

ro-201

rotate: 1005deg;

ro-202

rotate: 1010deg;

ro-203

rotate: 1015deg;

ro-204

rotate: 1020deg;

ro-205

rotate: 1025deg;

ro-206

rotate: 1030deg;

ro-207

rotate: 1035deg;

ro-208

rotate: 1040deg;

ro-209

rotate: 1045deg;

ro-210

rotate: 1050deg;

ro-211

rotate: 1055deg;

ro-212

rotate: 1060deg;

ro-213

rotate: 1065deg;

ro-214

rotate: 1070deg;

ro-215

rotate: 1075deg;

ro-216

rotate: 1080deg;

ro-217

rotate: 1085deg;

ro-218

rotate: 1090deg;

ro-219

rotate: 1095deg;

ro-220

rotate: 1100deg;

ro-221

rotate: 1105deg;

ro-222

rotate: 1110deg;

ro-223

rotate: 1115deg;

ro-224

rotate: 1120deg;

ro-225

rotate: 1125deg;

ro-226

rotate: 1130deg;

ro-227

rotate: 1135deg;

ro-228

rotate: 1140deg;

ro-229

rotate: 1145deg;

ro-230

rotate: 1150deg;

ro-231

rotate: 1155deg;

ro-232

rotate: 1160deg;

ro-233

rotate: 1165deg;

ro-234

rotate: 1170deg;

ro-235

rotate: 1175deg;

ro-236

rotate: 1180deg;

ro-237

rotate: 1185deg;

ro-238

rotate: 1190deg;

ro-239

rotate: 1195deg;

ro-240

rotate: 1200deg;

ro-241

rotate: 1205deg;

ro-242

rotate: 1210deg;

ro-243

rotate: 1215deg;

ro-244

rotate: 1220deg;

ro-245

rotate: 1225deg;

ro-246

rotate: 1230deg;

ro-247

rotate: 1235deg;

ro-248

rotate: 1240deg;

ro-249

rotate: 1245deg;

ro-250

rotate: 1250deg;

ro-251

rotate: 1255deg;

ro-252

rotate: 1260deg;

ro-253

rotate: 1265deg;

ro-254

rotate: 1270deg;

ro-255

rotate: 1275deg;

ro-256

rotate: 1280deg;

ro-257

rotate: 1285deg;

ro-258

rotate: 1290deg;

ro-259

rotate: 1295deg;

ro-260

rotate: 1300deg;

ro-261

rotate: 1305deg;

ro-262

rotate: 1310deg;

ro-263

rotate: 1315deg;

ro-264

rotate: 1320deg;

ro-265

rotate: 1325deg;

ro-266

rotate: 1330deg;

ro-267

rotate: 1335deg;

ro-268

rotate: 1340deg;

ro-269

rotate: 1345deg;

ro-270

rotate: 1350deg;

ro-271

rotate: 1355deg;

ro-272

rotate: 1360deg;

ro-273

rotate: 1365deg;

ro-274

rotate: 1370deg;

ro-275

rotate: 1375deg;

ro-276

rotate: 1380deg;

ro-277

rotate: 1385deg;

ro-278

rotate: 1390deg;

ro-279

rotate: 1395deg;

ro-280

rotate: 1400deg;

ro-281

rotate: 1405deg;

ro-282

rotate: 1410deg;

ro-283

rotate: 1415deg;

ro-284

rotate: 1420deg;

ro-285

rotate: 1425deg;

ro-286

rotate: 1430deg;

ro-287

rotate: 1435deg;

ro-288

rotate: 1440deg;

ro-289

rotate: 1445deg;

ro-290

rotate: 1450deg;

ro-291

rotate: 1455deg;

ro-292

rotate: 1460deg;

ro-293

rotate: 1465deg;

ro-294

rotate: 1470deg;

ro-295

rotate: 1475deg;

ro-296

rotate: 1480deg;

ro-297

rotate: 1485deg;

ro-298

rotate: 1490deg;

ro-299

rotate: 1495deg;

ro-300

rotate: 1500deg;

ro-301

rotate: 1505deg;

ro-302

rotate: 1510deg;

ro-303

rotate: 1515deg;

ro-304

rotate: 1520deg;

ro-305

rotate: 1525deg;

ro-306

rotate: 1530deg;

ro-307

rotate: 1535deg;

ro-308

rotate: 1540deg;

ro-309

rotate: 1545deg;

ro-310

rotate: 1550deg;

ro-311

rotate: 1555deg;

ro-312

rotate: 1560deg;

ro-313

rotate: 1565deg;

ro-314

rotate: 1570deg;

ro-315

rotate: 1575deg;

ro-316

rotate: 1580deg;

ro-317

rotate: 1585deg;

ro-318

rotate: 1590deg;

ro-319

rotate: 1595deg;

ro-320

rotate: 1600deg;

ro-321

rotate: 1605deg;

ro-322

rotate: 1610deg;

ro-323

rotate: 1615deg;

ro-324

rotate: 1620deg;

ro-325

rotate: 1625deg;

ro-326

rotate: 1630deg;

ro-327

rotate: 1635deg;

ro-328

rotate: 1640deg;

ro-329

rotate: 1645deg;

ro-330

rotate: 1650deg;

ro-331

rotate: 1655deg;

ro-332

rotate: 1660deg;

ro-333

rotate: 1665deg;

ro-334

rotate: 1670deg;

ro-335

rotate: 1675deg;

ro-336

rotate: 1680deg;

ro-337

rotate: 1685deg;

ro-338

rotate: 1690deg;

ro-339

rotate: 1695deg;

ro-340

rotate: 1700deg;

ro-341

rotate: 1705deg;

ro-342

rotate: 1710deg;

ro-343

rotate: 1715deg;

ro-344

rotate: 1720deg;

ro-345

rotate: 1725deg;

ro-346

rotate: 1730deg;

ro-347

rotate: 1735deg;

ro-348

rotate: 1740deg;

ro-349

rotate: 1745deg;

ro-350

rotate: 1750deg;

ro-351

rotate: 1755deg;

ro-352

rotate: 1760deg;

ro-353

rotate: 1765deg;

ro-354

rotate: 1770deg;

ro-355

rotate: 1775deg;

ro-356

rotate: 1780deg;

ro-357

rotate: 1785deg;

ro-358

rotate: 1790deg;

ro-359

rotate: 1795deg;

ro-360

rotate: 1800deg;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:ro-(value)

Small≥640px

md:ro-(value)

Medium≥768px

lg:ro-(value)

Large≥1024px

xxl:ro-(value)

Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:ro-(value)

Negative Values

Use negative variants to rotate in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:ro--(value)

Rotate

Widely available

ro-(value)361 utilities

Responsiveness

Hover State

Negative Values