This is my first question on SO, I hope I'm doing it well.
My goal is to have a "magical rune effect", where each letter of a text "floats around" its original position, as if it was suspended in mid-air on a magic parchment of some sort.
To put it simply, it will be used for a game. I know how to make something "float at random" on a page, like a hot air balloon; but this isn't what I'm trying to do : I want the letters to move around their original position.
So far, I've tried something (you can check my fiddle at https://jsfiddle.net/3as4omj2/ ), but I'm running into problems.
(don't worry about the default font and the ugly aqua background, it's used for positionning)
function float(element, range, speed) {
var position = $(element).offset();
$(element).attr( 'original_x', position.left);
$(element).attr( 'original_y', position.top);
$(element).attr( 'range', range );
$(element).attr( 'speed', speed );
drift(element);
}
function drift(element) {
var max = Number.parseInt($(element).attr('range'));
var speed = Number.parseInt($(element).attr('speed'));
var pos_x = Number.parseInt($(element).attr('original_x'));
var pos_y = Number.parseInt($(element).attr('original_y'));
var drift_x = max/2 - Math.floor(Math.random()*max);
var drift_y = max/2 - Math.floor(Math.random()*max);
var final_x = pos_x + drift_x;
var final_y = pos_y + drift_y;
var total_wait = Math.sqrt(drift_x*drift_x+drift_y*drift_y)*speed;
$(element).animate({
left : final_x+"px",
top : final_y+"px"
}, total_wait, /*"linear",*/ function(){
setTimeout(function () {
drift(element);
}, Math.abs(total_wait-Math.floor(Math.random()*150)));
});
}
$( "#go" ).click(function() {
float($("#t"),50, 10);
float($("#e"),50, 10);
float($("#s"),50, 10);
float($("#s"),50, 10);
float($("#t2"),50, 10);
})
Here's my problems and questions so far :
I can't line up my letters to form a word (like, "TEST" is seen vertically, I'd love to see it as an horizontal "TEST"); ideally, using spans, so I can dynamically add a word or remove it without creating dozens of elements.
The text moves bananas... and I don't seem to be understanding why. :(
I'd love to be able to "move the original position" along, so that I can animate the letters further (moving the general text left to right, for example).
Ultimately, is there a way to optimize the size of the font to the user's display ?
Can you guys give me some advice ?
Thank you in advance.
You could try using CSS3 animation instead, setting custom animation delay for every letter using :nth-of-type() selector. To better understand all the animation properties, see this docs. All the rest is the matter of tweaking translate values.
If you are determined enough, creating custom #keyframes for each letter is also an option.
.runes span {
position: relative;
display: inline-block;
padding: 10px;
background: aqua;
animation-duration: 2s;
animation-name: float;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.runes span:nth-of-type(1) {
animation-delay: .3s;
}
.runes span:nth-of-type(2) {
animation-delay: .4s;
}
.runes span:nth-of-type(3) {
animation-delay: .5s;
}
.runes span:nth-of-type(4) {
animation-delay: .7s;
}
#keyframes float {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(8px, 0);
}
50% {
transform: translate(0, 8px);
}
75% {
transform: translate(5px, 5px);
}
}
<section class="runes">
<span>T</span>
<span>E</span>
<span>S</span>
<span>T</span>
</section>
Related
Longer time I'm curious about HTML tag <marquee>.
You can find in MDN specification:
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
or on W3C wiki:
No, really. don't use it.
I searched several articles and found some mention about CSS relevant replacement. CSS attributes like:
marquee-play-count
marquee-direction
marquee-speed
but it seems, they don't work. They were a part of specification in year 2008, but they were excluded in year 2014
One way, proposed by W3 Consortium, is using CSS3 animations, but it seems for me much more complicated than easy-to-maintain <marquee>.
There are also plenty of JS alternatives, with lots of source code that you can add to your projects and make them larger.
I'm always reading things as: "don't ever use marquee", "is obsolete". And I don't get why.
So, can anybody explain to me, why is marquee deprecated, why is so "dangerous" using it and what is the easiest substitution?
I found an example, it looks nice. When you use all prefixes needed for good browser support, you have around 20-25 lines of CSS, with 2 values hardcoded (start and stop indent), depending on text length. This solution is not so flexible, and you can't create bottom-to-top effect with this.
I don't think you should move the content but that doesn't answer your question... Take a look at the CSS:
.marquee {
width: 450px;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
Here is the codepen.
Edit:
Here is the bottom to top codepen.
<marquee> was never part of any HTML specification and what you link to is a CSS spec so it's hard to deprecate something that was never included. HTML is about structure of a document, not its presentation. So having a self-animated element as part of HTML does not abide by those goals. Animation is in CSS.
You just have to define class and attached looping animation once in CSS and use it afterwards everywhere you need. But, as many people said - it's a bit annoying practice, and there is a good reason, why this tag is becoming obsolete.
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 5s linear infinite;
-webkit-animation: example1 5s linear infinite;
animation: example1 5s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="example1">
<h3>Scrolling text... </h3>
</div>
I know this was answered a couple years ago, but I found this when inspecting
this. When I inspected, I found this.
#keyframes scroll {
from {
transform: translate(0,0)
}
to {
transform: translate(-300px,0)
}
}
.resultMarquee {
animation: scroll 7s linear 0s infinite;
position: absolute
}
As stated before: the easiest substitution is CSS animation
To all the critics of the marquee:
It is a very useful tool for UI,
I am using it just on hover,
to display more information in a limited space.
The example for the mp3-player is excellent,
even my car-radio is using the effect to show the current song.
So nothing wrong about that, my opinion ...
I have created a jQuery script that will replace the old marquee tag with standard div. The code will also parse the marquee attributes like direction, scrolldelay and scrollamount. Actually the code can skip the jQuery part but I felt too lazy to do so, and the vanilla JS part is actually a solution that I modified from #Stano answere from here
Here is the code:
jQuery(function($) {
if ($('marquee').length == 0) {
return;
}
$('marquee').each(function() {
let direction = $(this).attr('direction');
let scrollamount = $(this).attr('scrollamount');
let scrolldelay = $(this).attr('scrolldelay');
let newMarquee = $('<div class="new-marquee"></div>');
$(newMarquee).html($(this).html());
$(newMarquee).attr('direction', direction);
$(newMarquee).attr('scrollamount', scrollamount);
$(newMarquee).attr('scrolldelay', scrolldelay);
$(newMarquee).css('white-space', 'nowrap');
let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
$(this).replaceWith(wrapper);
});
function start_marquee() {
let marqueeElements = document.getElementsByClassName('new-marquee');
let marqueLen = marqueeElements.length
for (let k = 0; k < marqueLen; k++) {
let space = ' ';
let marqueeEl = marqueeElements[k];
let direction = marqueeEl.getAttribute('direction');
let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
let scrollamount = marqueeEl.getAttribute('scrollamount');
let marqueeText = marqueeEl.innerHTML;
marqueeEl.innerHTML = marqueeText + space;
marqueeEl.style.position = 'absolute';
let width = (marqueeEl.clientWidth + 1);
let i = (direction == 'rigth') ? width : 0;
let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;
marqueeEl.style.position = '';
marqueeEl.innerHTML = marqueeText + space + marqueeText + space;
setInterval(function() {
if (direction.toLowerCase() == 'left') {
i = i < width ? i + step : 1;
marqueeEl.style.marginLeft = -i + 'px';
} else {
i = i > -width ? i - step : width;
marqueeEl.style.marginLeft = -i + 'px';
}
}, scrolldelay);
}
}
start_marquee();
});
.wrap {
width: 50%;
margin: 0 auto;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<marquee direction="left" scrollamount="5" scrolldelay="1"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? --- Ma'ruf Amin: Semua orang tahu saya tua, tapi... --- Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi --- 2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
Turki --- Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
<marquee direction="rigth" scrollamount="10" scrolldelay="2"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? --- Ma'ruf Amin: Semua orang tahu saya tua, tapi... --- Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi --- 2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
Turki --- Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
</div>
I have five image elements each containing a feather picture. I want to add them to the DOM, where some are randomly flipped right or left, with a random rotation angle.
I want each feather to animate so that they align with the X axis (ie back to 0deg), while also maintaining the scaleX. In my code below, the realignment works but for the flipped feathers, they also twist back the original "un-flipped" appearance during the animation.
How can I prevent this from happening? I know I could achieve this by using a <div> as a wrapper around each feather, but is there a better solution?
Javascript
function feathersPuff() {
for (let i = 0; i < 5; i++) {
let feather = document.createElement("img");
feather.src = "imgs/feather" + i + ".svg";
document.body.appendChild(feather);
let plusOrMinus = Math.random() < 0.5 ? -1 : 1;
feather.style.transform = "scaleX(" + plusOrMinus + ") rotate(" + getRandomInt(50) * plusOrMinus + "deg)"
feather.classList.add("feather");
}
}
CSS
.feather {
display: block;
height: 2%;
position: absolute;
animation: realign;
animation-iteration-count: 1;
animation-direction: linear;
animation-timing-function: ease-in-out;
animation-duration: 500ms;
animation-delay: 0;
animation-fill-mode: forwards;
}
#keyframes realign {
100% { transform: rotate(0deg) }
}
If I understand your question correctly, then a solution might be to define two animations, where one has it's final transform pre-multiplied with a negative scaleX for the negated feather (to ensure that it doesn't produce the undesirable "flip"/twist during the animation):
/*
Define flipped feather animation with positive scale (redundant)
*/
#keyframes regular {
100% {
transform: scaleX(1) rotate(0deg)
}
}
/*
Define flipped feather animation with negated scale. Assuming the
starting transform has scaleX(-1), this animation will stop the
twisting effect from happening
*/
#keyframes flipped {
100% {
transform: scaleX(-1) rotate(0deg)
}
}
With these two animations defined, you can also define corresponding modifier classes to select and apply these randomly to feather elements:
function getRandomInt() {
return Math.random() * 180;
}
function feathersPuff() {
for (let i = 0; i < 10; i++) {
let feather = document.createElement("img");
/* Placeholder image - replace this with your svg */
feather.src = "https://pngriver.com/wp-content/uploads/2017/12/download-free-birds-feather-png-transparent-images-transparent-backgrounds-feather_PNG12958-300x160.png";
document.body.appendChild(feather);
/* Randomly orrientate feather */
if (Math.random() < 0.5) {
/* If regular orrientation, then apply regular modifier class which
will use the "regular" animation (without scaling) */
feather.classList.add("regular");
feather.style.transform =
"rotate(" + getRandomInt(50) + "deg)";
} else {
/* If flipped orrientation, then apply flipped modifier class which
will apply the "flipped" animation (with negated scaling factored in) */
feather.classList.add("flipped");
feather.style.transform =
"scaleX(-1) rotate(" + getRandomInt(50) + "deg)"
}
feather.classList.add("feather");
}
}
feathersPuff();
/* Define flipped feather animation with positive scale (redundant)*/
#keyframes regular {
100% {
transform: scaleX(1) rotate(0deg)
}
}
/* Define flipped feather animation with negated scale */
#keyframes flipped {
100% {
transform: scaleX(-1) rotate(0deg)
}
}
/* Modifier class which animates feathers of the "regular orientation" */
.feather.regular {
animation-name: regular;
}
/* Modifier class which animates feathers of the "flipped orientation" */
.feather.flipped {
animation-name: flipped;
}
.feather {
height: 30px;
display: block;
/* position: absolute; Removed this to prevent feathers overlapping to better
demonstrate the techniques final result */
animation-iteration-count: 1;
animation-direction: linear;
animation-timing-function: ease-in-out;
animation-duration: 2500ms;
animation-fill-mode: forwards;
}
Longer time I'm curious about HTML tag <marquee>.
You can find in MDN specification:
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
or on W3C wiki:
No, really. don't use it.
I searched several articles and found some mention about CSS relevant replacement. CSS attributes like:
marquee-play-count
marquee-direction
marquee-speed
but it seems, they don't work. They were a part of specification in year 2008, but they were excluded in year 2014
One way, proposed by W3 Consortium, is using CSS3 animations, but it seems for me much more complicated than easy-to-maintain <marquee>.
There are also plenty of JS alternatives, with lots of source code that you can add to your projects and make them larger.
I'm always reading things as: "don't ever use marquee", "is obsolete". And I don't get why.
So, can anybody explain to me, why is marquee deprecated, why is so "dangerous" using it and what is the easiest substitution?
I found an example, it looks nice. When you use all prefixes needed for good browser support, you have around 20-25 lines of CSS, with 2 values hardcoded (start and stop indent), depending on text length. This solution is not so flexible, and you can't create bottom-to-top effect with this.
I don't think you should move the content but that doesn't answer your question... Take a look at the CSS:
.marquee {
width: 450px;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
Here is the codepen.
Edit:
Here is the bottom to top codepen.
<marquee> was never part of any HTML specification and what you link to is a CSS spec so it's hard to deprecate something that was never included. HTML is about structure of a document, not its presentation. So having a self-animated element as part of HTML does not abide by those goals. Animation is in CSS.
You just have to define class and attached looping animation once in CSS and use it afterwards everywhere you need. But, as many people said - it's a bit annoying practice, and there is a good reason, why this tag is becoming obsolete.
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 5s linear infinite;
-webkit-animation: example1 5s linear infinite;
animation: example1 5s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="example1">
<h3>Scrolling text... </h3>
</div>
I know this was answered a couple years ago, but I found this when inspecting
this. When I inspected, I found this.
#keyframes scroll {
from {
transform: translate(0,0)
}
to {
transform: translate(-300px,0)
}
}
.resultMarquee {
animation: scroll 7s linear 0s infinite;
position: absolute
}
As stated before: the easiest substitution is CSS animation
To all the critics of the marquee:
It is a very useful tool for UI,
I am using it just on hover,
to display more information in a limited space.
The example for the mp3-player is excellent,
even my car-radio is using the effect to show the current song.
So nothing wrong about that, my opinion ...
I have created a jQuery script that will replace the old marquee tag with standard div. The code will also parse the marquee attributes like direction, scrolldelay and scrollamount. Actually the code can skip the jQuery part but I felt too lazy to do so, and the vanilla JS part is actually a solution that I modified from #Stano answere from here
Here is the code:
jQuery(function($) {
if ($('marquee').length == 0) {
return;
}
$('marquee').each(function() {
let direction = $(this).attr('direction');
let scrollamount = $(this).attr('scrollamount');
let scrolldelay = $(this).attr('scrolldelay');
let newMarquee = $('<div class="new-marquee"></div>');
$(newMarquee).html($(this).html());
$(newMarquee).attr('direction', direction);
$(newMarquee).attr('scrollamount', scrollamount);
$(newMarquee).attr('scrolldelay', scrolldelay);
$(newMarquee).css('white-space', 'nowrap');
let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
$(this).replaceWith(wrapper);
});
function start_marquee() {
let marqueeElements = document.getElementsByClassName('new-marquee');
let marqueLen = marqueeElements.length
for (let k = 0; k < marqueLen; k++) {
let space = ' ';
let marqueeEl = marqueeElements[k];
let direction = marqueeEl.getAttribute('direction');
let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
let scrollamount = marqueeEl.getAttribute('scrollamount');
let marqueeText = marqueeEl.innerHTML;
marqueeEl.innerHTML = marqueeText + space;
marqueeEl.style.position = 'absolute';
let width = (marqueeEl.clientWidth + 1);
let i = (direction == 'rigth') ? width : 0;
let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;
marqueeEl.style.position = '';
marqueeEl.innerHTML = marqueeText + space + marqueeText + space;
setInterval(function() {
if (direction.toLowerCase() == 'left') {
i = i < width ? i + step : 1;
marqueeEl.style.marginLeft = -i + 'px';
} else {
i = i > -width ? i - step : width;
marqueeEl.style.marginLeft = -i + 'px';
}
}, scrolldelay);
}
}
start_marquee();
});
.wrap {
width: 50%;
margin: 0 auto;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<marquee direction="left" scrollamount="5" scrolldelay="1"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? --- Ma'ruf Amin: Semua orang tahu saya tua, tapi... --- Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi --- 2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
Turki --- Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
<marquee direction="rigth" scrollamount="10" scrolldelay="2"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? --- Ma'ruf Amin: Semua orang tahu saya tua, tapi... --- Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi --- 2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
Turki --- Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
</div>
I'm working on a game and just found out about -webkit-animation-play-state CSS attribute. I want certain text to show itself as a short animation, then hide and show when called again (in javascript).
I figured out how to start animation when I want to in javascript, but after its finished, the text stays on the screen, which I don't want to.
HTML:
<p id="INFO">
TEST
</p>
CSS:
#-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 400%;
}
}
#INFO {
position: absolute;
left: 400px;
top: 200px;
-webkit-animation-name: pulse;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-play-state:paused;
visibility: hidden;
}
JS:
var INFO = document.getElementById("INFO");
INFO.innerHTML = "WRONG";
INFO.style.color = "RED";
INFO.style.webkitAnimationPlayState = "running";
INFO.style.visibility = "visible";
I read some questions/answers about -webkit-animation-play-state on this site, but none regarding the issue I am having.
One thing I read about was that animation goes to its default values when its ended. But my default values say that animation is "hidden" ? source: how to stop my webkit frame animation?
If anyone can point me in the right direction I'd be grateful.
If I was not clear enough, ask for more info please.
Thank you
For what you are trying to do, you don't need to use -webkit-animation-play-state.
Instead, try starting the animation by applying a class with the animation properties set. Then use a JavaScript event listener to remove the class once the animation finishes.
You should also keep the element hidden with opacity instead of visibility:hidden since you are manipulating the opacity in the animation.
CSS:
#-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 400%;
}
}
#INFO {
opacity:0;
position: absolute;
left: 400px;
top: 200px;
}
.pulse {
-webkit-animation-name: pulse;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}
JS:
var INFO = document.getElementById("INFO");
INFO.innerHTML = "WRONG";
INFO.style.color = "RED";
INFO.addEventListener('webkitAnimationEnd', function (e) {
this.classList.remove('pulse');
});
DEMO >> CodePen
Id like to easy flip a text upside down, like this page is doing: http://papertiger.com/
I want to do this as easy as possible, using
-webkit-transition: 0s;
-webkit-transform rotateX(180deg)
This is my code:
HTML:
<script>
$(document).ready(function() {
Js.init();
});
</script>
<body>
<div id="flipbox">
<p id="text">Front</p>
</div>
</body>
JAVASCRIPT:
var Js = {
init: function() {
var up=true;
//do this every 5 seconds
var i = window.setInterval( function(){
up=!up;
Js.rotate(up);
//this will run just once after the timeout
var j = window.setTimeout( function(){
//Js.switchText(up);
}, 1000 );
}, 5000 );
},
rotate: function(up){
if(up){
$("#flipbox").removeClass('rotateDown');
$("#flipbox").addClass('rotateUp');
}else{
$("#flibox").removeClass('rotateUp');
$("#flipbox").addClass('rotateDown');
}
},
switchText: function(up) {
if(up){
$("#text").text('front');
}else{
$("#text").text('back');
}
}
}
CSS:
#flipbox{
color: green;
display: block;
font-size: 70px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.rotateDown{
transition: 2s;
-webkit-transform: rotateX(180deg);
}
.rotateUp{
transition: 2s;
-webkit-transform: rotateX(0deg);
}
.upSideDown{
-webkit-transition: 0s;
-webkit-transform: rotate(180deg);
}
As it is now, I get the text "First" to rotate as I want to. To switch the text and rotate it in Y 180 degrees (to make it readable, since its now upside down), does not work, and is why the line is commented.
So, I think I need to have the text rotated by both X and Y 180 degress, how do I do that? rotate3d(1,1,0,180deg) does not work like that. If I write rotateX followed by rotateY, the first one gets overwritten.
...or is the jQuery plugin flippy somthing I should look for?
Ive tried to make a jsfiddle. It did not work, but can be found here: http://jsfiddle.net/EdNVw/
Thanks in advace for any advice!