YouTip LogoYouTip

Home > CSS3 > Css3 Pr Rotation Point

Css3 Pr Rotation Point

📅 2026-06-20 | 📂 CSS3
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; } h1, h2, h3 { color: #333; } code { background-color: #f4f4f4; padding: 2px 6px; border-radius: 3px; font-family: monospace; } pre { background-color: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; } table { border-collapse: collapse; width: 100%; margin: 20px 0; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .example { border: 1px solid #ccc; padding: 15px; margin: 20px 0; border-radius: 5px; } .note { background-color: #fff3cd; border: 1px solid #ffeeba; padding: 15px; border-radius: 5px; margin: 20px 0; } .browser-support { margin: 20px 0; } .browser-support img { height: 20px; margin-right: 5px; } .promo { background-color: #e9ecef; padding: 15px; border-radius: 5px; margin: 20px 0; } .promo a { color: #007bff; text-decoration: none; } .promo a:hover { text-decoration: underline; } .note-sharing { border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin: 20px 0; } .note-sharing input, .note-sharing textarea { width: 100%; padding: 8px; margin: 5px 0; box-sizing: border-box; } .note-sharing button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; } .note-sharing button:hover { background-color: #0056b3; } .category-nav { margin: 20px 0; } .category-nav ul { list-style-type: none; padding-left: 0; } .category-nav li { margin: 5px 0; } .category-nav a { text-decoration: none; color: #007bff; } .category-nav a:hover { text-decoration: underline; }

CSS3 rotation-point |

CSS3 Tutorial

Deep Dive

  • Web Service
  • Web Design & Development
  • Development Tools
  • Programming Languages
  • Scripting Languages
  • Programming
  • Software
  • Web Services
  • Scripts
  • Computer Science

CSS3 rotation-point Property

Example

Rotate the h1 element 180 degrees (from top to bottom):

h1 {
    rotation-point: 50% 50%;
    rotation: 180deg;
}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

No browser currently supports the rotation-point property.

Property Definition and Usage

The rotation-point property is a pair of values that define the point of offset from the top-left border edge.

Tip: The rotation-point property needs to be used in conjunction with the rotation property.

Default value: 0
Inherited: no
Version: CSS3
JavaScript syntax: object.style.rotation="180deg"

Syntax

rotation-point: value;
Value Description
left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom If only one keyword is specified, the second value will be "center".
x% y% Percentage values, referencing the border box width and height.

iFlytek Coding Plan includes free model call quotas, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform. Configuration Guide ¥3.9/month Sign up now

Click to Share Notes

Write a note...

Image URL

Image Description

Image Size × Restore

  • Nickname (Required)
  • Email (Required)
  • Reference URL

Category Navigation

← Php Eof HeredocBootstrap4 Tooltip →

📂 Categories