I have added a background image to a div, but because the div has been rotated, so has the background-image. How can I rotate just the image the opposite way to it appears straight?
live url: http://bit.ly/1iqXQRN
html
<section id="about-hero-img"></section>
css
#about-hero-img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
width: 1030px; margin-left: -50px; margin-top: 20px; height: 200px; background-image: url('../Images/about-header-img.jpg'); padding-top: 30px; }
Move the background-image to a the :before pseudo-element of you header
#about-hero-img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
width: 1030px;
margin-left: -50px;
margin-top: 20px;
height: 200px;
/* background-image: url('../Images/about-header-img.jpg'); */
padding-top: 30px;
position: relative;
}
#about-hero-img:before {
width: 1030px;
height: 230px;
position: absolute;
left: 0;
top: 0;
content: ' ';
background-image: url('../Images/about-header-img.jpg');
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
Related
I'm pretty comfortable with this solution already but it still makes quite of a shapeshift as it rotates and I wanted to ask you guys if you think of a better solution.
What I want is, given is a hexagon, that starts with one axis up and then rotates to a line at the top,its not what I got but that's just a matter of arranging the rotation accordingly. Since this shape is rendered with multiple divs (found it online not my own) on top of each other that are not visible and covers the main shape so it displays as a hexagon, all the shapes have to rotate at the same time, one thing though is that hexagon-in0 has a different rotation degree than the other, I tried setting up another keyframe with an exact same animation just changing the rotation degree values but did not work, what do you think?
When I posted the code snippet here since I didn't add a background image like in my code I realize it looks like a cube rotating outside-in, kinda cool
.hexagon {
position: relative;
left: 50%;
top: 0%;
transform: translate(-50%, 0%);
cursor: pointer;
visibility: hidden;
width: 400px; /*400*/
height: 200px; /*200*/ }
.hexagon-in0 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg); }
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
animation: rotateHex 5s ease-in 1s forwards;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background: rgb(70,243,252);
background: radial-gradient(circle, rgba(70,243,252,1) 0%, rgba(67,28,130,1) 57%);
visibility: visible;
animation: rotateHex 5s ease-in 1s forwards;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);}
#keyframes rotateHex {
0%{
transform: rotate(-120deg);
}
100%{
transform: rotate(-60deg);
}
<div class="hexagon"><div class="hexagon-in0"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div></div>
Rotate the container instead of each individual piece.
.hexagon {
position: relative;
left: 50%;
top: 0%;
transform: translate(-50%, 0%);
cursor: pointer;
visibility: hidden;
width: 400px; /*400*/
height: 200px; /*200*/
animation: rotateHex 5s ease-in 1s forwards;
}
.hexagon-in0 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background: rgb(70,243,252);
background: radial-gradient(circle, rgba(70,243,252,1) 0%, rgba(67,28,130,1) 57%);
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);}
#keyframes rotateHex {
0%{
transform: translate(-50%, 0%) rotate(-120deg);
}
100%{
transform: translate(-50%, 0%) rotate(-60deg);
}
<div class="hexagon"><div class="hexagon-in0"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div></div>
I have never done animations in CSS, what I'm trying to get is something like cog's animations two circles spinning, one to the right and the other to the left without overlapping...
I think I got the animation(sort of) but not the drawing I think..
I have this demo: https://jsfiddle.net/Tankers/8dxh94zp/9/
the "figures" are correct and the location also correct but the animation is not.
when they spin it overlaps may be is because the object are not 100% squares?, what need to be visible is just half circles just the way that is in my demo..
HTML
<div class="wrap">
<div class="top"></div>
<div class="bott"></div>
</div>
CSS
#keyframes half_spin {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-ms-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
60% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
100% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.wrap {
display: block;
overflow: hidden;
position: relative
}
.top {
width: 300px;
height: 150px;
border: 1px solid red;
border-bottom-left-radius: 151px;
border-bottom-right-radius: 151px;
position: relative;
animation: half_spin 5000ms ease-in-out infinite;
}
.top:before {
position: absolute;
width: 100%;
height: 1px;
background: red;
content: " ";
top: 0;
left: 0;
}
.bott {
width: 300px;
height: 150px;
border: 1px solid black;
border-top-left-radius: 151px;
border-top-right-radius: 151px;
animation: half_spin 5000ms ease-in-out infinite reverse;
position: relative;
}
.bott:before {
position: absolute;
width: 100%;
height: 1px;
background: black;
content: " ";
bottom: 0;
left :0;
}
If I understand your question correctly, this code snippet is what you're looking for. I added a transform-origin property to both the top and bottom half-circles to specify the point that we're rotating around.
Both divs should rotate around the midpoint of their flat edge, for the top that is transform-origin: 50% 0%; and for the bottom it is transform-origin: 50% 100%;
#keyframes half_spin {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-ms-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
60% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
100% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.wrap {
display: block;
overflow: hidden;
position: relative
}
.top {
width: 300px;
height: 150px;
border: 1px solid red;
border-bottom-left-radius: 151px;
border-bottom-right-radius: 151px;
position: relative;
animation: half_spin 5000ms ease-in-out infinite;
transform-origin: 50% 0%;
}
.top:before {
position: absolute;
width: 100%;
height: 1px;
background: red;
content: " ";
top: 0;
left: 0;
}
.bott {
width: 300px;
height: 150px;
border: 1px solid black;
border-top-left-radius: 151px;
border-top-right-radius: 151px;
animation: half_spin 5000ms ease-in-out infinite;
position: relative;
transform-origin: 50% 100%;
}
.bott:before {
position: absolute;
width: 100%;
height: 1px;
background: black;
content: " ";
bottom: 0;
left :0;
}
<div class="wrap">
<div class="top">
</div>
<div class="bott">
</div>
</div>
I'm having trouble on how to achieve making the X stay at the middle during transform. It looks like the issue only occur in Firefox browser between Chrome and FF.
I'm using FF Quantum 58.0.2 and the X moves to the top, in Chrome I have no issues.
I tried to add top: 50%; in the pseudo element selector but during rotation the X moves few pixels to the bottom. Is there any other way to achieve this in Firefox like it does in Chrome?
.close >.x-button{
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close >.x-button::before,
.close >.x-button::after{
position: absolute;
content: '';
width: 100%;
height: 0.08em;
}
.close:hover >.x-button{
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover >.x-button::before,
.close:hover >.x-button::after {
background-color: #FD0030;
}
.close >.x-button::before{
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close >.x-button::after{
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<button class="close">
<span class="x-button"></span>
</button>
You could also add bottom: 0.20em on
.close >.x-button::before,
.close >.x-button::after
to fix it on all browsers.
Why .20em? .25em is half the icon's dimension and .5em is half the top and bottom margin.
Firefox:
Snippet:
.close>.x-button {
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close>.x-button::before,
.close>.x-button::after {
position: absolute;
content: '';
width: 100%;
height: 0.08em;
/* new */
bottom: .20em;
}
.close:hover>.x-button {
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover>.x-button::before,
.close:hover>.x-button::after {
background-color: #FD0030;
}
.close>.x-button::before {
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close>.x-button::after {
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<button class="close">
<span class="x-button"></span>
</button>
You can vertically center the before and after like you do with any position absolute elements
Give it a top: 50% and transform: translateY(-50%)
I verified this on Mac FF
.close >.x-button{
width: 0.5em;
height: 0.5em;
position: relative;
background-color: #343a40;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0.5em 0em;
transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
transform-origin: center center;
}
.close >.x-button::before,
.close >.x-button::after{
position: absolute;
content: '';
width: 100%;
height: 0.08em;
top: 50%;
}
.close:hover >.x-button{
border-radius: 0;
background-color: transparent;
-ms-transform: scale(1.8) rotateZ(-360deg);
-o-transform: scale(1.8) rotateZ(-360deg);
-webkit-transform: scale(1.8) rotateZ(-360deg);
-moz-transform: scale(1.8) rotateZ(-360deg);
transform: scale(1.8) rotateZ(-360deg);
}
.close:hover >.x-button::before,
.close:hover >.x-button::after {
background-color: #FD0030;
}
.close >.x-button::before{
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translateY(-50%);
}
.close >.x-button::after{
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translateY(-50%);
}
<button class="close">
<span class="x-button"></span>
</button>
I created an octagon clipped style using CSS transform rotate and scale as the code snippet below.
However, when looking in Chrome 52.0.2743.116 (64-bit) on El Capitan, the image looks blurry. On the contrary, the image looks sharp in Firefox.
I have tried all kinds of solutions such as backface-visibility: hidden; transform: translateZ(0); filter: blur(0); image-rendering: -webkit-optimize-contrast;. Yet the image is still blurry.
Is there any webkit specific rules that I can use to fix this?
div.octagon {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-moz-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-ms-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-o-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
margin-top: 1em;
margin-bottom: 1em;
}
div.octagon > * {
position: relative;
overflow: hidden;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: transparent;
border: 4px solid;
margin: 0;
background-color: black;
}
div.octagon > *:after {
position: absolute;
/* There needs to be a negative value here to cancel
* out the width of the border. It's currently -3px,
* but if the border were 5px, then it'd be -5px.
*/
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
border: inherit;
}
div.octagon > * > img {
display: block;
-webkit-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-moz-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-ms-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-o-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
transform: rotate(-67.5deg) scale(1.1) translateZ(0);
max-width: 100%;
height: auto;
image-rendering: -webkit-optimize-contrast;
}
.col-6 {
display: inline-block;
width: 49%;
}
.col-6 > .octagon {
width: 100%;
}
<div class="col-6">
<div class="octagon">
<p>
<img src="https://placeimg.com/300/300/people" width="500" height="500" />
</p>
</div>
</div>
<div class="col-6">
<img src="https://placeimg.com/300/300/people" width="300" height="300" />
</div>
I just tested this on my comp, and it looks better when I applied image rendering pixelated instead the -webkit-optimize-contrast.
div.octagon > * > img {
image-rendering: pixelated;
}
I have a couple divs, I want to rotate them to look like diamonds, but I don't want their background images to rotate, how can i achieve this? This is my code right now
<div id="diamonds">
<div class="diamond-big diamond-tiesto"><img src="<?php echo $images_url; ?>dj-1-overlay.png" /></div>
</div>
and my CSS:
#diamonds div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
float:left;
}
.diamond-tiesto {background-image:url('images/dj-1.jpg'); background-size:cover; width:212px; height:212px; margin-left:160px; margin-right:120px;}
.diamond-tiesto img {margin-top:80px; margin-left:-20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Basically I am trying to achieve this http://mqchen.github.io/jquery.diamonds.js/ without the jquery, anyone have any suggestions
Heres a fiddle just incase:
http://jsfiddle.net/7qj8h/1/
You could use the techniques described in this article and apply the transformation to a background image pseudo-element.
Demo/Code here: http://jsfiddle.net/7qj8h/4/
HTML:
<div id="diamonds">
<div class="diamond-big diamond-tiesto">
<img src="http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1-overlay.png" />
</div>
</div>
CSS:
.diamond-big
{
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
/* rotate diamond */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.label {
/* counter rotate label */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* position label */
margin-top:80px;
margin-left:-20px;
}
.diamond-big:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
/* counter rotate bg */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* set bg for different DJs */
.diamond-tiesto:before {
background: url(http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg) 0 0 repeat;
}
Set the .diamond to rotate 45 degrees
Set the background on a .diamond-inner child div, and rotate it back -45 degrees to counter the parent's transformation.
Set overflow: hidden; on the .diamond div to clip the edges.
Adjust the positioning on the inner diamond and image.
The result: http://jsfiddle.net/7qj8h/3/
The CSS:
#diamonds > div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
float:left;
overflow: hidden;
}
.diamond-tiesto {
width:212px;
height:212px;
}
.diamond-tiesto .diamond-inner {
background-image: url("http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg");
background-size: cover;
height: 305px;
left: 2px;
margin: 0 0 0 -49px;
position: absolute;
top: -45px;
transform: rotate(-45deg);
width: 305px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.diamond-tiesto img {
margin-left: 22px;
margin-top: 123px;
}