Text bottom-to-top in a table - css

Is there a way to rotate the text 90 degrees when inside a table:
Something like:
<tr>
<th class="bottomtop">
<span class="bottomtop">{{ task_definition }}</span>
</th>
</tr>
.bottomtotop {
transform:rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
I want the text to look like:
h
e
l
l
o
# with the actual letters rotated 90 degrees counter-clockwise.


I think your main problem is that your span has a class of bottomtop, but your CSS defines bottomtotop. I just added a display:block, and corrected the class name and it worked fine. http://jsfiddle.net/c5FzT/
.bottomtop {
display:block;
transform:rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}


May be you want something like this
.bottomtotop {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
display:inline-block
}
The most important thing is that span is an inline element. transform doesn't work with that. So you need to use either block elements or use display:inline-block or display:block with span and of-course match the class name with markup. (you mentioned bottomtop in your markup but in your css it is bottomtotop)
Js Fiddle

Related

I want to turn the back of my credit card. Not with Focus

I have a credit card component. It works when there is a hover effect, but does not work in the focus part (CCV) of the corresponding Input. How can I do it?
Component Full Codes:
https://codepen.io/veronicadev/pen/VXqZgR (not my codes)
HTML Element
<input-mask id="special-cvc-input" v-model="cardCvc" type="text" mask="999"></input-mask>
Working Hover CSS Codes
.card:hover .card__front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.card:hover .card__back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}
Not Working Focus CSS Codes
#special-cvc-input:focus .card_front{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
#special-cvc-input:focus .card__back{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}

Change
.card:hover .card__front
on
#special-cvc-input:focus + .card .card__back

RTL and LTR icon positioning

I have attached the below image URL , for that I have used below code,but I am not able to align icon right. Can anyone please help me out to revert the image or particular icon position, right to left.
.icon-alignleft:before {
content: "\e00a";
}
Thank you

May be this will help you
(flip image/icon)
.icon-alignleft:before {
content: "\e00a";
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}

.rtl-icon {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}

One way to do it would be to flip the container holding the icon horizontally using transform.
.icon-alignleft {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
Hope this helps.

How can you add a class in CSS to animate it on the page?

I am trying to animate two images from the centre, the the opposite sides of each other.
One to the far left, and the other to the far right, with some text in the middle.
see jsFiddle
I have seen on a few websites now an is-visible css attribute (for example, something like this):
.image.is-visible {
left: 0%;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
.image {
background-position: right;
-webkit-transform: translateX(45%);
-moz-transform: translateX(45%);
-ms-transform: translateX(45%);
-o-transform: translateX(45%);
transform: translateX(45%);
I have my transform: translateY(0%); on my jsFiddle, but how do you add a class, for example: is-visible to animate it on the page?

Add Class is probably done by a jQuery
https://api.jquery.com/addclass/
So you just need to define when the class should be added
Maybe while scrolling
Example:
http://codepen.io/LukeD1uk/pen/zvGQZN
Or if the document is loaded
$( document ).ready(function() {
$(".someclass").addClass("is-visible");
});

How to do a custom border shape with CSS3

I'm just wondering if this shape I have in the image url is doable in css3 with webkit.

Here is a good source for CSS shapes
Just edit the class properties to your liking to get desired shape
CSS:
.parallelogramRight {
width:100px;
height:100px;
border:1px solid #000;
background:yellow;
transform: skew(-20deg);
-o-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
}

You can use the transform: skew() property.
http://codepen.io/anon/pen/tkdyx

Yes it is.
-moz-transform: skewX(-23deg);
-webkit-transform: skewX(-23deg);
-o-transform: skewX(-23deg);
-ms-transform: skewX(-23deg);
transform: skewX(-23deg);

CSS3 transform an element but not its descendants

I have an horizontal menu and I want to rotate 90° left or right some of its tabs.
Problem is that the transform property also rotates descendants.
It looks difficult to put them back in place, is there a solution?
P.S. I want to avoid using images or JS, they are ok as fallbacks.

You could apply the reverse rotation on the descendants.
For example
div.parent{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
div.parent span{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
Example: http://jsfiddle.net/RpcfB/1/
Fyi, you will need to play with padding and/or margin to make it all work.
EDIT
I'm afraid it's more complicated than that.
That's the truth!! Although, I as mentioned, you have to play with the css.
For example, to fix the first one, you need to make these adjustments:
add a class to the first li
#nav_main_gts > li.rotate{ //ADD CLASS HERE
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1);
transform: rotate(-90deg);
}
Then change the second rule to target the next ul not li
Then fiddle with the margin to get it all in place. Remember, because the first li is rotated, down is not left, so a negative margin-left is needed
#nav_main_gts > li.rotate ul{ //CHANGE TO UL HERE
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
transform: rotate(90deg);
margin-left:-100px; //ADD A MARGIN HERE
}
continue with the others.
Updated example: http://jsfiddle.net/FKCTk/1/

Resources