I have a background image with a style called north:
.north {
background-image: url("./images/turtle-north.png");
background-repeat: no-repeat;
background-size: 50px 50px;
}
This is part of a reactjs component that renders a grid. The image displays fine with this rule. However when I try to rotate it with this rule:
.rotate_ninety {
-moz-transform: rotate(90deg) translateX(150px);
-webkit-transform: rotate(90deg) translateX(150px);
-o-transform: rotate(90deg) translateX(150px);
-ms-transform: rotate(90deg) translateX(150px);
transform: rotate(90deg) translateX(150px);
}
The img is pushed down ie not at the top left position in the grid anymore. How can I rotate the image and keep this position?
"The img is pushed down ie not at the top left position in the grid anymore"
It's because you're using translateX, if you want just to rotate the image, don't move it, use only transform: rotate:
* {
padding: 0;
margin: 0;
}
.rotate_ninety {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
<img src="https://www.w3schools.com/angular/pic_angular.jpg" class="rotate_ninety">
Related
I'm trying to put some images in a decorative way, however, I can't seem to get the code to work properly mainly on the CSS side. I'm pretty sure I'm doing something wrong with the selectors and was wondering if someone would be willing to take a look at it.
It seems that the code breaks when I add the <a> tag but I would really like to include the link to the images.
Broken code with <a> tag: JSFiddle
Working code without <a> for reference: JSFiddle
I'm hoping I can get the one with the <a> tag working.
.photos img {
position: absolute;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
padding: 10px 10px 30px 10px;
background: white;
border: solid 1px black;
}
.photos img:nth-of-type(1) {
left: 50px;
top: 50px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
.photos img:nth-of-type(2) {
left: 150px;
top: 100px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.photos img:nth-of-type(3) {
left: 250px;
top: 50px;
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);
}
.photos img:nth-of-type(4) {
left: 350px;
top: 150px;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.photos img:nth-of-type(5) {
left: 450px;
top: 50px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.photos img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
z-index: 10;
-webkit-transform: rotate(380deg) scale(1.5);
-moz-transform: rotate(380deg) scale(1.5);
-o-transform: rotate(380deg) scale(1.5);
transform: rotate(380deg) scale(1.5);
z-index: 10;
}
<div class="photos">
<img src="https://lorempixel.com/160/220"/>
<img src="https://lorempixel.com/160/220"/>
<img src="https://lorempixel.com/160/220"/>
<img src="https://lorempixel.com/160/220"/>
<img src="https://lorempixel.com/160/220"/>
</div>
You're using nth-of-type(1) to place the images, but because they are now children of anchor tags, they're all the first child. Therefore they will all be placed in the same location and get the .photos img:nth-of-type(1) CSS.
Try doing it like this instead:
.photos a:nth-of-type(1) img {
left: 50px;
top: 50px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
Full result: https://jsfiddle.net/kLnn2jLu/4/
I have an image that I want to make the height 75% of what it normally would be. I am using a responsive layout, so this cannot be done using fixed pixel heights, etc. This will not work as a background image, so I am wondering if there is a similar effect to using background-size: 100% 75%; but that will work on an img tag? I would like to achieve this using just CSS.
Edit:
Example: https://jsfiddle.net/x9n0t4bu/
HTML:
<div id="disp">
<a href="google.com"><img src="http://wowslider.com/sliders/
demo-10/data/images/dock.jpg"></a>
</div>
CSS:
#disp{
margin-top:-17.9px;
width: 100%;
}
#disp img{
width:100%;
}
You can use transform: scale, this should make the image 75% of its original size.
-webkit-transform: scale(0.75); /* Saf3.1+, Chrome */
-moz-transform: scale(0.75); /* FF3.5+ */
-ms-transform: scale(0.75); /* IE9 */
-o-transform: scale(0.75); /* Opera 10.5+ */
transform: scale(0.75);
#disp{
margin-top:-17.9px;
width: 100%;
}
#disp img{
-webkit-transform: scale(1, 0.75); /* Saf3.1+, Chrome */
-moz-transform: scale(1, 0.75); /* FF3.5+ */
-ms-transform: scale(1, 0.75); /* IE9 */
-o-transform: scale(1, 0.75); /* Opera 10.5+ */
transform: scale(1,0.75);
width:100%;
}
<div id="disp">
<a href="google.com"><img src="http://wowslider.com/sliders/
demo-10/data/images/dock.jpg"></a>
</div>
I'm trying to recreate the text that is rotating 3D in Y axis.
So I came up with the following and it is centered, but it does not do anything (I'm using SCSS by the way):
<div class="wrapper">
<div id="rotate-wrapper">
<div>
Rotate me
</div>
</div>
</div>
What could I be doing wrong? Explanations would be appreciated for purpose of learning.
Thank you in advance and will accept/upvote answer.
You need to actually make the rotation animation. In the site you specified, it is defined as:
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg); }
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg); }
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg); } }
#keyframes rotation {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg); }
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg); }
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg); } }
For an explanation on how CSS animations work, see this MDN article.
When I apply the class prev it doesn't flip the image.
I'm kinda stuck on why it does not work, I tried it with Chrome, Firefox and IE and none of them work.
.pbtn {
background-image: url('../../images/linkpil.png');
background-repeat: no-repeat;
display: inline-block;
float: left;
background-position: center center;
&.first {
display: none;
}
&.next {
background-color: #C9E2E5;
}
.prev {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
a {
overflow: hidden;
text-indent: -9999px; //hide text
height: 15px;
width: 15px;
display: inline-block;
}
}
<div class="pbtn">
</div>
From your less code, it looks like your html has to be this.
<div class="pbtn next">
</div>
<div class="pbtn prev">
</div>
and replace
&.next {
background-color: #C9E2E5;
}
.prev {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
With:
&.next {
background-color: #C9E2E5;
}
&.prev {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Your css will do nothing because there is nothing in a to transform.
The background image is on the parent, and there is no content or image in the a. For all we know the transform is working fine but we can't see anything.
I have a <div> that I want to rotate 90 degrees:
<div id="container_2"></div>
How can I do this?
You need CSS to achieve this, e.g.:
#container_2 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
Demo:
#container_2 {
width: 100px;
height: 100px;
border: 1px solid red;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div id="container_2"></div>
(There's 45 degrees rotation in the demo, so you can see the effect)
Note: The -o- and -moz- prefixes are no longer relevant and probably not required. IE9 requires -ms- and Safari and the Android browser require -webkit-
Update 2018: Vendor prefixes are not needed anymore. Only transform is sufficient. (thanks #rinogo)
Use following in your CSS
div {
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-moz-transform: rotate(90deg); /* Firefox */
-ms-transform: rotate(90deg); /* IE 9 */
-o-transform: rotate(90deg); /* Opera */
transform: rotate(90deg);
}
Use transform: rotate(90deg):
#container_2 {
border: 1px solid;
padding: .5em;
width: 5em;
height: 5em;
transition: .3s all; /* rotate gradually instead of instantly */
}
#container_2:hover {
-webkit-transform: rotate(90deg); /* to support Safari and Android browser */
-ms-transform: rotate(90deg); /* to support IE 9 */
transform: rotate(90deg);
}
<div id="container_2">This box should be rotated 90° on hover.</div>
Click "Run code snippet", then hover over the box to see the effect of the transform.
Realistically, no other prefixed entries are needed. See Can I use CSS3 Transforms?
Use the css "rotate()" method:
div {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#rotate{
transform: rotate(90deg);
}
<div>
normal div
</div>
<br>
<div id="rotate">
This div is rotated 90 degrees
</div>
you can use css3 property writing-mode
writing-mode: tb-rl
css-tricks
mozilla
We can add the following to a particular tag in CSS:
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
In case of half rotation change 90 to 45.