Is there a way to spin the picture but keep the container still?

Is there a way to animate the rotation of the gradient color without rotating the rhombus?

I attempted using transform: rotate, but it ended up rotating the entire shape. Any suggestions on how to achieve this effect?

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% -50%);
}

#shape {
  position: absolute;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2 VuZXJhdGVkKSIgLz48L3N2Zz4=);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  width: 500px;
  height: 500px;
  top: -250px;
  left: -250px;
}
<div class="box">
  <div id="shape"></div>
</div>

htmlcsscss-animations

Answer №1

To create a unique effect on the box, you can use a pseudo element positioned absolutely to rotate behind the box without affecting anything else:

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#shape::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(red, green, blue, cyan, magenta, yellow);
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359.9deg);
  }
}

#shape {
  position: absolute;
  background-image: url(data:image/svg+xml;base64,dGVzdCBpbWFnZSBjb21tZW50IDE=); /* Base64 encoded SVG image */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  width: 500px;
  height: 500px;
  top: -250px;
  left: -250px;
}
<div class="box">
  <div id="shape"></div>
</div>

Answer №2

One option is to utilize the :before pseudo-element

.box {
height: 100vh;
display:flex;
justify-content: center;
align-items:center;
}

#shape {
position: relative;
width: 500px;
height: 500px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

#shape::before {
transform: rotate(-60deg);
content: "";
position: absolute;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wI...);
width: 100%;
height: 100%;

}
<!DOCTYPE html>
<html>

<head>
<title>TIMER</title>
</head>

<body>
<div class="box">
<div id="shape"></div>
</div>

</body>

</html>

Alternatively, you could simply implement a linear-gradient

.box {
height: 100vh;
display:flex;
justify-content: center;
align-items:center;
}

#shape {
position: relative;
width: 500px;
height: 500px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
background-image: linear-gradient(30deg, #53fdfd, navy)
}
<!DOCTYPE html>
<html>

<head>
<title>TIMER</title>
</head>

<body>
<div class="box">
<div id="shape"></div>
</div>

</body>

</html>

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

Aligning container divs at the center in various screen resolutions

I recently constructed a portfolio website using Bootstrap and Isotope JS. In my layout, I have a container div which works perfectly when viewed on a desktop browser - displaying 3 divs in one line. However, the issue arises when the resolution changes an ...

javascripthtmlcsstwitter-bootstrapjquery-isotope

The color of the Bootstrap font remains unchanged and the responsiveness of the navbar button is not functioning correctly

Just starting out with frontend development and my professor recommended trying Bootstrap for practice. I attempted to code a simple webpage, but ran into some issues. Here is the code I used: https://github.com/nguyencuc2586/project1 I encountered a pro ...

htmlcssbootstrap-4bootstrap-5

Button inside table cell not showing Bootstrap tooltip

I've implemented a feature where each row in a table has a button that triggers a pop-up modal when clicked. I want these buttons to display tooltips when hovered over and when focused. Below is an example of the HTML structure: <link hr ...

javascripthtmltooltipbootstrap-5

What is the best way to send a parameter from jQuery to PHP?

I am trying to create a simple button that, when clicked, will pass a value from jQuery to a PHP file for execution. The idea is that when the button is clicked, it triggers an onclick event which sends the number "1" to the jQuery code. Then, jQuery shoul ...

phpjqueryhtml

retrieve the value of a textarea element from an HTML table

Is there a way to extract data from a nested table's textarea using the row index? I attempted the following code snippet but it did not work. var note = document.getElementById($index).cells[3]; var y = document.getElementsByTagName("textarea").valu ...

javascripthtmlangularjs

What is the best way to make multiple HTML tables sortable?

I recently implemented an open-source JavaScript table sorter in my project. You can find more information about it here: However, I encountered an issue where only the most recently added table on my page is sortable. When users press a button, new table ...

javascriptjqueryhtmlajax

Having issues getting Toggle Switches to function properly in Asp.Net Webforms

I am in need of a toggle switch that can be toggled on or off depending on the user's preference. Here is a CSS code snippet that I have come across in various examples: .switch { position: relative; display: inline-block; width: 60px; hei ...

htmlcssasp.netcheckboxtoggle

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

javascriptjquerycssjquery-uinouislider

What is the process for integrating internal PHP code into this HTML form instead of relying on an external PHP file?

I am looking to create a basic HTML form and I want to use the method below for posting. My goal is to include all PHP code within the HTML file itself. (I understand that simply renaming contact.htm to contact.php is an option, but I need guidance on tra ...

phphtmlformspost

Is it appropriate for HTML5 Web Workers to utilize CORS for cross-origin requests?

As I was creating a hosted API that relies on web workers, I encountered an intriguing issue. I am looking for feedback from the community to help me with this. Even though my server has the necessary CORS headers in place to serve the worker JS files and ...

javascripthtmlcorsweb-worker

What is the best way to generate a new DIV every time a button is clicked?

I am attempting to make a square DIV that is red and measures 100x100 pixels. Each time a button is clicked, I want the square to be created. However, the code I have written is not functioning properly: <html> <title> Create New Div ...

javascripthtml

Include chosen select option in Jquery form submission

Facing some challenges with a section of my code. Essentially, new elements are dynamically added to the page using .html() and ajax response. You can see an example of the added elements in the code. Since the elements were inserted into the page using . ...

javascriptjqueryhtmlajaxforms

The navigation bar on the website highlights vibrant green arrows next to the

I'm having trouble implementing a bootstrap menu on my website using the code provided by Bootstrap. The menu is not displaying correctly and instead showing small green UL arrows. I have JavaScript and Bootstrap scripts in my project. Is there a way ...

htmlcssasp.net-mvctwitter-bootstrap

What could be causing this Form to redirect to the incorrect file path?

I recently updated the login menu for my Admin panel. Initially, the login page was named login.php, but I decided to change it to index.php. Even though I made sure to update the action from login.php to index.php, when I click on the login button it st ...

htmlforms

What is the best way to determine the midpoint index of an array?

As a newcomer, I have a question regarding a recent assignment. The task involves creating a global array where objects are imported as they are entered into an input field on the HTML document. The challenge is to update the current list on the document ...

javascripthtmlarraysindexing

Tips for preventing the colors of all buttons from changing when only one is clicked in JavaScript

const tasks = `[{ "taskName": "Task 1", "image": "./images/task1.jpg", "description": "Task 1 description", "importance": 0 }, { "taskName": "Task 2", "image": "./images/task2.jpg", "description": "Task 2 description", ...

javascripthtmlif-statementbootstrap-5dom-manipulation

What is the proper way to credit the glyphicons element in Twitter's bootstrap framework?

According to the section on icons in the Base CSS page of GitHub's Twitter bootstrap, Glyphicons Halflings were not originally available for free. However, thanks to an agreement between Bootstrap and the creators of Glyphicons, developers can now use ...

javascripthtmltwitter-bootstrapglyphicons

Obtain a Compilation of Video Sources in an HTML5 Format

Hey there, I am using an HTML5 video. This is just an example <video width="320" id="video" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video1.mp4" type="video/mp4"> <source src="movie.ogg" typ ...

javascripthtml

How should attributes be passed to the li element properly?

I am trying to transfer values from the database to the <li> tag. Can someone confirm if the approach below is valid and the proper way to do it? <li id='$current_row["RA_SUB_ID"]' component_name='$current_row["RA_SUB_NAME"]' ...

html

Animation that slides in from the left using CSS styling

My current project involves creating a slideshow, and while it is mostly working fine, I am facing an issue with the animations. The animation for sliding out works perfectly, but the animation for sliding in from the left doesn't seem to be functioni ...

javascriptcss