Is there a way to rotate a shape in CSS3 without rotating the text contained within it?

I am a beginner in CSS3 and I have a question regarding rotation of shapes. I have created four shapes that rotate and change color upon hovering, each containing a text box with phrases like "About" or "Contact". However, I want the text box to remain stationary while the shape rotates around it. I tried to counter-rotate the span but can't seem to figure it out. I know there are spacing issues with the shapes, but I am treating this as an exercise for myself before fixing the aesthetics. 

.burst-12 {
width: 80px;
height: 80px;
text-align: center;
position: absolute;
left:50px;
opacity: .8;
top:100px;
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 15 16 17 18px;
}

.burst-12:before, .burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: inherit;
}

.burst-12:before {
-webkit-transform: rotate(30deg);
   -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
     -o-transform: rotate(30deg);
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18 19 17 16px;
}

.burst-12:after {
-webkit-transform: rotate(60deg);
   -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
     -o-transform: rotate(60deg);
border-radius: 19px;
-moz-border-radius: 19px;
-webkit-border-radius: 19 10 11 16px;
}

.x1{
  background: #f64260;
}

.x2{
background: #f8605b;
left:123px;
-webkit-transform: rotate(15deg);
   -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
     -o-transform: rotate(15deg);
}

.x1:hover{
background-color:#94dbdd;
-webkit-transform: rotate(300deg);
   -moz-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
     -o-transform: rotate(300deg);
}

.x2:hover{
background-color:#4c6278;
-webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);
}

.x3 {
background-color: sandybrown;
left:190px;
-webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
     -o-transform: rotate(10deg);
}

.x3:hover{
background-color:cornflowerblue;  
-webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);
}

.x4{
background-color: #f1ce4b;
left:260px;
-webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
     -o-transform: rotate(10deg);
}

.x4:hover{
background-color:#305578;
-webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);
}

.burst-12 span{
 display:block;
 position:absolute;
 z-index:2;
}

p:first-letter{
text-transform: uppercase;
}

p {
color: white;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times,     serif;
letter-spacing:0.1em;
text-align:center;
margin: 30px auto;
text-transform: lowercase;
line-height: 145%;
font-size: 14pt;
font-variant: small-caps;
border-style:solid;
border-width: 1px;
padding: 4px;
}

Here's my jfiddle: https://jsfiddle.net/mthrasher33/bdh8sybj/

Thank you!

css

Answer №1

Indeed, you have the ability to rotate text using a counterclockwise motion:

.x1:hover span{
    -webkit-transform: rotate(-300deg);
       -moz-transform: rotate(-300deg);
        -ms-transform: rotate(-300deg);
         -o-transform: rotate(-300deg);
}

Here is a visual representation of how it would appear: https://jsfiddle.net/bdh8sybj/1/

If your intention is to maintain the text in its original position, consider utilizing CSS3 translate:

.x1:hover span{
    -webkit-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
       -moz-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
        -ms-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
         -o-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
}

For further reference, visit: https://jsfiddle.net/bdh8sybj/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to use column formatting on a row using flexbox

I am working on creating a layout with rows and columns where the content in each column is vertically aligned. Here is an example of what I am trying to achieve: Currently, I am using react and have multiple components. The approach I believe will work ...

cssreactjsflexboxrowmultiple-columns

Tips on positioning one image on top of another image without the images shifting when the screen size is adjusted

Struggling to position the lightbulbs above the floor plan? Even after setting the floor plan image's position property to 'relative', the lightbulb images refuse to cooperate. Here is a snippet of the HTML code: <div> <img src ...

htmlcss

Unattractive mobile modal

Hey there, This is how my .modal CSS code appears: .modal { position: fixed; top: 10%; left: 50%; z-index: 1050; width: 560px; margin-left: -280px; background-color: #fff; border: 1px solid #999; border: 1px solid rgba ...

cssmodal-dialog

What are the various methods for incorporating icons and logos into website design?

Can anyone provide insights on the quality of logos and icons used in professional websites? I often create logos and icons using Illustrator, but when comparing them to icons on websites like those shown in the provided image and links, mine appear blurry ...

htmlcssimagegraphicsweb

"Adjusting the background color based on the current day using PHP and CSS

Check out the screenshot of my result here. I'm currently experiencing an issue with the code while trying to modify a calendar. The error seems to be originating from tablerow.php, as I've indicated in the comments. I am attempting to change the ...

phphtmlcss

The appearance of online and local websites varies on a single screen and browser

My current dilemma revolves around the difference in appearance of my website when viewed locally versus online. Both versions are connected to the same git repository and use the same css file. Interestingly, I can view the page on both my local machine a ...

cssrenderingjsxnext.js

Missing sidebar display

Hi there! I am having an issue with my sidebar not appearing correctly when I click on the toggle button. It seems to be moving to the side, but the sidebar itself is blank or transparent. I suspect that the problem lies within my JavaScript file. As a beg ...

javascripthtmlcssnavbarsidebar

Tips for passing down CSS styles through Less stylesheets

In an effort to create a legend below a <table> that matches the colors defined in Bootstrap stylesheets, I am struggling with the following: .table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot ...

csstwitter-bootstrap-3lessless-mixins

Trouble with setting HTML table width

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table border="1" width="100%"> <tr> <td>bbbbbbbbbbbbbbbbbbbbbbbbbbb ...

htmlcsswidthhtml-table

Is there a way for me to display both the right and wrong answers in real-time as users make their selections on my multiple-choice question website? Additionally, can I track the number

I've just implemented the code for my multiple-choice question (MCQ) website. One of the key features I want to include is immediate feedback when a user selects an answer - indicating whether it is correct or incorrect along with showcasing the corre ...

javascripthtmlcss

Looking to add a dropdown feature to my current main navigation bar

I've been struggling to add a drop-down menu to my website's main menu. Every time I try, something goes wrong - sometimes the menu appears inline, other times it completely messes up the layout. Here is the HTML code snippet: <ul class="m ...

javascriptjqueryhtmlcss

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

javascriptjqueryhtmlcss

Expanding Images in Bootstrap 4 Carousel

I am encountering some difficulties with a basic carousel implemented using Bootstrap 4. The carousel contains 3 images with the class d-block w-100, which is supposed to make the images stretch to the full width of the screen. However, in my case, the ima ...

htmlcssbootstrap-4carousel

Dynamic mouse path

Currently, I am in the process of creating a mouse trail similar to what is found on this particular website. I have been using JavaScript, jQuery, and various libraries in my attempt to achieve this effect; however, it has proven to be more challenging th ...

javascriptjqueryhtmlcss

Tips for activating and deactivating two jQuery plugins with the help of modenizr.js

if (Modernizr.touch) { skrollr.init().destroy(); } else { var s=skrollr.init({ forceHeight:false, smoothScrolling:false, }); } In this snippet, I have implemented a jQuery code that checks for Modernizr touch functionality ...

jquerycssskrollranimate.css

What are the steps to creating a webpage with scrolling in HTML?

Essentially, I have a question that may sound similar to others, but please hear me out. What I am looking for is the ability to have one photo fixed in place while being able to scroll within it. To provide a better understanding, here is an example: www. ...

htmlcss

The CSS background seems to be malfunctioning in Chrome

Could you please explain why this HTML and CSS code works on FF, IE9, jsfiddle, but not on the live site using Google Chrome? HTML: <p> <a href="http://tambnguyen.com/wp-content/uploads/2012/05/256501557_1280.jpg"> <span class= ...

htmlcssgoogle-chromebackground

Steps for implementing overflow scroll on a div with an unspecified height

The layout I'm working with looks like this: .page { width: 360px; height: 704px; border: 1px solid red; } header { height: 10%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: lightblue; } ...

javascripthtmlcssoverflow

I am looking to superimpose one rectangle over another rectangle

I am looking to create something similar using CSS and TypeScript/JavaScript: Could someone please guide me on how to achieve this? My attempt with a flex container looks like this: I am new to front-end development. Can anyone point out what I might be ...

javascripthtmlcssreactjstypescript

Is there a way to display menu items in a list when hovering over the parent element using CSS?

Is it possible to make the code below run when hovering over (#cssmenu ul > li > ul > li ) with the mouse? #cssmenu ul > li > ul > li > ul { right: 1170px; } ...

css