CSS: inverted and backwards text - css

Are there any CSS gurus out there up to the challenge of representing one of Edgar Poe's cryptographic texts? It uses inverted and backwards characters, which would have driven his type composer crazy. The image file tyler.jpg appears about 3/5 of the way down the linked page: Secret Writing 03
Trying to find CSS examples across the 'net but not much success.


Transforms provide this pretty simply. For example
body {
display:flex;
flex-wrap: wrap;
}
span::before {
content: 'P';
}
span:nth-child(2n) {
scale: -1;
}
span:nth-child(n+3) {
transform: rotateY(180deg);
}
<span></span>
<span></span>
<span></span>
<span></span>


Provided by Mattias Sander, Improvementsoft (Sweden)
span.horizontal {
display: inline-block;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
span.vertical {
display: inline-block;
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}

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

How can I flip an element 180degrees with CSS?

I don't want to rotate it - it's not 1998!
Can I purely flip this element when the is-expanded class is added?
.resources__icon {
#include icon('arrow-down-white', 28, 18);
}
.is-expanded.resources__icon {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

ScaleY can flip an image, not just "change the scale" - use scaleY instead of rotate
.resources__icon {
#include icon('arrow-down-white', 28, 18);
}
.is-expanded.resources__icon {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}

Try it: Replace translate to rotate please!
.rotate{
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
1. None rotate
<br>
<img src="http://hocwebchuan.com/reference/tag/images/img_sakura.jpg" width="100">
<br>
2. Rotate
<br>
<img class="rotate" src="http://hocwebchuan.com/reference/tag/images/img_sakura.jpg" width="100">

How to fix trouble with css animation in Firefox?

I have an svg-diagram that works properly in Chrome, but not in Firefox. I read some tasks about similar problems on this site, but the solution did not found. As i know latest Firefox browsers dont need vendor prefixes neither keyframe or transition. So i stuck a little.
Also i tried to add -moz prefixes but it doesnt help
#keyframes pulse {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
Here is my code http://codepen.io/tvsjke/pen/OpVjON
I would be very grateful if you could point to the root of the problem.

Why $rotation variable in scss not parse in filter: progid:DXImageTransform.Microsoft.BasicImage

Compiled css
.fa-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg); }
SCSS
$fa-css-prefix : 'fa';
#mixin fa-icon-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
.#{$fa-css-prefix}-rotate-90 { #include fa-icon-rotate(90deg, 1); }
Why I got unexpected result filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
Can anyone please point out what mistake in this scss.

As I had mentioned earlier in comments, for this case we need to make use of interpolation like in the below code block to get the value of the $rotation variable printed. The syntax for interpolation is #{$var}. Interpolation is required because the variable's value needs to be placed within another string and then the whole thing needs to be assigned as the value to a property.
$fa-css-prefix : 'fa';
#mixin fa-icon-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
.#{$fa-css-prefix}-rotate-90 { #include fa-icon-rotate(90deg, 1); }

Combining multiple "transform" entries in Less

I have two mixins which both convert to -webkit-transform:
.rotate(#deg) {
-webkit-transform: rotate(#deg);
}
.scale(#factor) {
-webkit-transform: scale(#factor);
}
When I use them together:
div {
.rotate(15deg);
.scale(2);
}
... they (as expected) show up as:
div {
-webkit-transform: rotate(15deg);
-webkit-transform: scale(2);
}
This doesn't seem to be valid CSS as the second has precedence over the first; the first is discarded. To combine transform entries it should be:
-webkit-transform: rotate(15deg) scale(2);
How can I accomplish such CSS to be generated by LESS, i.e. multiple transform entries that are combined correctly?

Starting from Less v1.7.0, merging property values with a space separator is possible and there is no need to club the two mixins into one.
The below Less code
.rotate(#deg) {
-webkit-transform+_: rotate(#deg);
}
.scale(#factor) {
-webkit-transform+_: scale(#factor);
}
div{
.rotate(45deg);
.scale(1.5);
}
will compile into the following CSS:
div {
-webkit-transform: rotate(45deg) scale(1.5);
}

Provide your transforms as arguments for a single mixin:
.transform(#scale,#rotate) {
-webkit-transform: #arguments;
}
I guess, you also could achieve to concatenate your separate mixins into one with the help of guards, but I'm not entirely sure;)
I think you are not able to achieve this in another way, since the parser would have to modify code afterwards which should not be possible.

I think there is a simple way over it, create a div container for the eleemnt, and apply first transform to the cntainer, leaving the second one for the element itself

I was having problems getting #arguments to work. I used the #rest variable which did the trick
LESS example:
.transform(#rest...) {
transform: #rest;
-ms-transform: #rest;
-webkit-transform: #rest;
}
.someClass{
.transform(translate3D(0,0,0),scale(1,1));
}
.otherClass{
.transform(translate3D(0,0,0),rotate(1,1));
}
.anotherClass{
.transform(rotate(1,1));
}
Output CSS:
.someClass {
transform: translate3D(0, 0, 0) scale(1, 1);
-ms-transform: translate3D(0, 0, 0) scale(1, 1);
-webkit-transform: translate3D(0, 0, 0) scale(1, 1);
}
.otherClass {
transform: translate3D(0, 0, 0) rotate(1, 1);
-ms-transform: translate3D(0, 0, 0) rotate(1, 1);
-webkit-transform: translate3D(0, 0, 0) rotate(1, 1);
}
.anotherClass {
transform: rotate(1, 1);
-ms-transform: rotate(1, 1);
-webkit-transform: rotate(1, 1);
}

Resources