Path: csiph.com!eternal-september.org!feeder.eternal-september.org!reader01.eternal-september.org!.POSTED!not-for-mail
From: Ben Bacarisse <ben.usenet@bsb.me.uk>
Newsgroups: comp.lang.javascript
Subject: Re: Animation playing while a form is submitted, part 3
Date: Thu, 13 Jun 2019 12:47:15 +0100
Organization: A noiseless patient Spider
Lines: 47
Message-ID: <87h88tk8qk.fsf@bsb.me.uk>
References: <a078d1e7-9622-48df-8207-fa87edfacbc8@googlegroups.com> <1nty2i7i5ewcy.a2f5wk8iv2cl.dlg@40tude.net> <f601774c-80c2-43f4-9087-9cf54f8e5433@googlegroups.com> <r98xu6mr1m6a.1blb7zs5045g0.dlg@40tude.net> <7c44cb1f-1496-43da-ba81-eb8d7a8d1155@googlegroups.com> <69829822-659e-4a7d-becb-d95a045e70c1@googlegroups.com> <fca02d72-54db-4da1-a96a-12dcf7227e2c@googlegroups.com> <87lfyfui1k.fsf@bsb.me.uk> <ce0a5019-6112-4168-81b4-856c4ebf9eb0@googlegroups.com> <87ftoj4xje.fsf@bsb.me.uk> <d7f68a0d-72e8-4727-9048-7d0bff5bde98@googlegroups.com> <87d0jlo9kk.fsf@bsb.me.uk> <d99f3330-9ba8-4917-ace7-d84f6b9994ac@googlegroups.com> <87blz4mku4.fsf@bsb.me.uk> <47a1996f-49ae-441b-bb70-289e815d5ac6@googlegroups.com> <874l4ulimr.fsf@bsb.me.uk> <03afbc71-7eb2-4571-9db1-414225ddac7d@googlegroups.com>
Mime-Version: 1.0
Content-Type: text/plain
Injection-Info: reader02.eternal-september.org; posting-host="17b8464bdda2db42bdd36532a04ef2ef"; logging-data="30928"; mail-complaints-to="abuse@eternal-september.org";	posting-account="U2FsdGVkX1+K1D39ls19hTEpeabX0/MY3ZmYJltXo7U="
Cancel-Lock: sha1:4X6Msm6wFATV1WNm0mRbc6CzaPU= sha1:cMhYS3xUxmQH7zkSAot76ojmx/w=
X-BSB-Auth: 1.6e57e7daebde860a2730.20190613124715BST.87h88tk8qk.fsf@bsb.me.uk
Xref: csiph.com comp.lang.javascript:36903

groovee@cyberdude.com writes:

> On Thursday, 13 June 2019 00:46:03 UTC+5:30, Ben Bacarisse  wrote:
>
>> For the moment just copy the perspective(...) and translateZ(...) values
>> you want and paste them into the two arm of the @keyframes rules
>> alongside the two rotations.
>
> I did this, still Not Working! :
>
> @keyframes spinit {
>   from {
> 	transform: perspective(200px);
> 	transform: translateZ(-200px);
>     transform: rotate3d(1,0,0,0deg);
>   }
>   to {
> 	transform: perspective(200px);
> 	transform: translateZ(-200px);
>     transform: rotate3d(1,0,0,360deg);
>   }
> }

It would be worth while reading up on how CSS rules work.  Those changes
have no effect.  It's like writing

  border: 1px;
  border: 3px;

You need to write a compound transformation:

  transform: perspective(200px) translateZ(-200px) rotate3d(1,0,0,360deg);

<cut>
>> > Phew! Thank God! - I thought *I* was doing something wrong... Thanks,
>> > man! :)
>> 
>> What do you mean?  For me, writing code that doesn't work is a clear
>> case of my doing something wrong.
>
> Well - that's just the way the browser works, right? There's no RULE
> set in stone that transformations SHOULDN'T accumulate....?

The browser is behaving as it should.  The CSS is wrong.

-- 
Ben.