Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #36582 > unrolled thread

TWO lines of code for transforms?

Back to article view | Back to comp.lang.javascript

Contents

  TWO lines of code for transforms? groovee@cyberdude.com - 2019-05-10 03:52 -0700
    Re: TWO lines of code for transforms? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-10 13:38 +0200
    Re: TWO lines of code for transforms? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-05-10 14:27 +0200
      Re: TWO lines of code for transforms? "Mark-" <nospam@mapson.xyz> - 2019-05-10 14:13 +0000
        Re: TWO lines of code for transforms? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-05-11 11:26 +0100
          Re: TWO lines of code for transforms? Julio Di Egidio <julio@diegidio.name> - 2019-05-11 04:20 -0700
            Re: TWO lines of code for transforms? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-05-11 14:31 +0100
              Re: TWO lines of code for transforms? Julio Di Egidio <julio@diegidio.name> - 2019-05-11 08:29 -0700
                Re: TWO lines of code for transforms? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-05-11 16:59 +0100
                  Re: TWO lines of code for transforms? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-05-11 17:55 +0200
                Re: TWO lines of code for transforms? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-05-11 18:31 +0100
                  Re: TWO lines of code for transforms? Gene Wirchenko <genew@telus.net> - 2019-05-11 22:01 -0700
            Re: TWO lines of code for transforms? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-05-11 18:18 +0100
              Re: TWO lines of code for transforms? Gene Wirchenko <genew@telus.net> - 2019-05-11 22:04 -0700
                Re: TWO lines of code for transforms? John G Harris <niam@jghnorth.org.uk.invalid> - 2019-05-12 10:27 +0100
                  Re: TWO lines of code for transforms? Gene Wirchenko <genew@telus.net> - 2019-05-14 10:44 -0700
    Re: TWO lines of code for transforms? Ram Tobolski <ramtob@gmail.com> - 2019-05-11 07:06 -0700
      Re: TWO lines of code for transforms? groovee@cyberdude.com - 2019-05-13 04:28 -0700
        Re: TWO lines of code for transforms? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-05-13 13:38 +0100
          Re: TWO lines of code for transforms? groovee@cyberdude.com - 2019-05-13 07:31 -0700
            Re: TWO lines of code for transforms? Ram Tobolski <ramtob@gmail.com> - 2019-05-13 09:11 -0700
            Re: TWO lines of code for transforms? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-05-13 17:14 +0100
              Re: TWO lines of code for transforms? groovee@cyberdude.com - 2019-05-14 23:56 -0700
                Re: TWO lines of code for transforms? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-05-15 09:43 +0200
                Re: TWO lines of code for transforms? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-05-15 22:06 +0100

Page 2 of 2 — ← Prev page 1 [2]

#36606

On Monday, May 13, 2019 at 5:32:09 PM UTC+3, gro...@cyberdude.com wrote:
> On Monday, 13 May 2019 18:08:44 UTC+5:30, Ben Bacarisse  wrote:
> 
> > 
> > Lots of things.  There's good documentation available on the web if you
> > know where to look.  For example
> > https://developer.mozilla.org/en-US/docs/Web/CSS/transition
> > 
> > Did you try asking in a CSS group?  You posted two assignments, but the
> > question was not really about scripting at all.
> > 
> > -- 
> > Ben.
> 
> OK, I don't get it. This is an example from that page:
>        
>          transition: margin-right 2s;
> 
> Margin here is a "thing" that's part of the page, it's visible and tangible. How can THAT go on the right hand side, AS WELL AS "transform 1s"? "Margin" is a NOUN, "Transform" is a VERB, isn't it??
> 
> I'm quite thoroughly confused :(

Hi, don't take this too literally.. "transform" does seem like a verb, but it actually function in css like a noun. Read it as if it were written "transformation", or "transformed".

[toc] | [prev] | [next] | [standalone]

#36607

groovee@cyberdude.com writes:

> On Monday, 13 May 2019 18:08:44 UTC+5:30, Ben Bacarisse  wrote:
>
>> 
>> Lots of things.  There's good documentation available on the web if you
>> know where to look.  For example
>> https://developer.mozilla.org/en-US/docs/Web/CSS/transition
>> 
>> Did you try asking in a CSS group?  You posted two assignments, but the
>> question was not really about scripting at all.
>> 
>> -- 
>> Ben.

It's best to cut signatures.

> OK, I don't get it. This is an example from that page:
>        
>          transition: margin-right 2s;
>
> Margin here is a "thing" that's part of the page, it's visible and
> tangible. How can THAT go on the right hand side, AS WELL AS
> "transform 1s"? "Margin" is a NOUN, "Transform" is a VERB, isn't it??

transform is also a noun and it might help you think of it as one in the
example you gave.

The line above means that changes to margin-right will take 2 seconds to
complete.  Your original example said that changes to the transform
should take 1 second.

> I'm quite thoroughly confused :(

You probably need to see some more examples to reset the view you've
formed of how this stuff works.  Here's one that uses a margin:

<!DOCTYPE html>
<head>
    <style>
     p { margin-left: 10em; transition: margin-left 2s; }
     p:hover { margin-left: 1em; }
    </style>
</head>
<body>
    <p>This is paragrah with a wide margin.</p>
</body>

I've put it up at: http://bsb.me.uk/testing/trans.html

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#36610

On Monday, 13 May 2019 21:45:00 UTC+5:30, Ben Bacarisse  wrote:
> 
> You probably need to see some more examples to reset the view you've
> formed of how this stuff works.  Here's one that uses a margin:
> 
> <!DOCTYPE html>
> <head>
>     <style>
>      p { margin-left: 10em; transition: margin-left 2s; }
>      p:hover { margin-left: 1em; }
>     </style>
> </head>
> <body>
>     <p>This is paragrah with a wide margin.</p>
> </body>
> 

OK, so the first "p" line means that "if there are any changes to the margin-left property, that change will take 2s to complete" - is that it?

Btw, I notice that if you put the "p:hover" line BEFORE the first "p" line, it still works!! - how the hell is THAT? How does that work??

Also - there's no "transform" anywhere at all in the above code...?!! Isn't that compulsory? (I'm getting Confused a little more...)


Thanks for your help.

[toc] | [prev] | [next] | [standalone]

#36611

groovee@cyberdude.com wrote on 15 May 2019 in comp.lang.javascript:

> On Monday, 13 May 2019 21:45:00 UTC+5:30, Ben Bacarisse  wrote:
>> 
>> You probably need to see some more examples to reset the view you've
>> formed of how this stuff works.  Here's one that uses a margin:
>> 
>> <!DOCTYPE html>
>> <head>
>>     <style>
>>      p { margin-left: 10em; transition: margin-left 2s; }
>>      p:hover { margin-left: 1em; }
>>     </style>
>> </head>
>> <body>
>>     <p>This is paragrah with a wide margin.</p>
>> </body>
>> 
> 
> OK, so the first "p" line means that "if there are any changes to the
> margin-left property, that change will take 2s to complete" - is that
> it? 
> 
> Btw, I notice that if you put the "p:hover" line BEFORE the first "p"
> line, it still works!! - how the hell is THAT? How does that work?? 

This is NOT a *script code* that is executed, 
it is a *CSS style declaration*.

[That's why it is OFF-TOPIC in this NG.]

In *CSS style declarations* ORDER is only significant where they:

1 conflict
and 
2 have the same specificity
> Also - there's no "transform" anywhere at all in the above code...?!!
> Isn't that compulsory? (I'm getting Confused a little more...) 

READING the specs would help you:

"The **transform** property applies a 2D or 3D transformation to an element. 
This property allows you to rotate, scale, move, skew, etc., elements."

So "transforming an element" is NOT "manipulating a margin".

"CSS **transitions** allows you to change property values smoothly (from one 
value to another), over a given duration."


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#36612

groovee@cyberdude.com writes:

> On Monday, 13 May 2019 21:45:00 UTC+5:30, Ben Bacarisse  wrote:
>> 
>> You probably need to see some more examples to reset the view you've
>> formed of how this stuff works.  Here's one that uses a margin:
>> 
>> <!DOCTYPE html>
>> <head>
>>     <style>
>>      p { margin-left: 10em; transition: margin-left 2s; }
>>      p:hover { margin-left: 1em; }
>>     </style>
>> </head>
>> <body>
>>     <p>This is paragrah with a wide margin.</p>
>> </body>
>
> OK, so the first "p" line means that "if there are any changes to the
> margin-left property, that change will take 2s to complete" - is that
> it?

Roughly, yes.

> Btw, I notice that if you put the "p:hover" line BEFORE the first "p"
> line, it still works!! - how the hell is THAT? How does that work??

A remark like this means you have a picture of how this stuff works and
you were surprised when you made a change to the CSS because the result
did not match your expectations.  It's not easy to fix that because I
can't find out what your internal picture is, and whole books have been
written about how this stuff really works.

The order of CSS statements only matters when there is a direct clash --
a later setting will override an earlier one -- but otherwise the rules
just establish a set of facts.  I'm being a bit vague with "direct
clash".  To find out the details you's have to learn about selectors and
specificity, but p and p:hover are different selectors with different
specificity and different values for margin-left.  The order these facts
are given in makes no difference here.

> Also - there's no "transform" anywhere at all in the above code...?!!
> Isn't that compulsory? (I'm getting Confused a little more...)

No.  Forget what you think you know about transform.  It is not an
action, but a thing -- a property -- like margin-left.  An element's
transform is just one of the things that can be made to transition, but
you can give an element a transform that never changes and you make
other properties of an element transition, as in the example above.

The transform really just established a relative coordinate system.
Maybe it should have been called something else like "mapping" or
"coordinates".  If you think of it like that, then "transition:
transform 2s" means "changes to the coordinate system for the element
take 2s".

-- 
Ben.

[toc] | [prev] | [standalone]

Page 2 of 2 — ← Prev page 1 [2]

Back to top | Article view | comp.lang.javascript

csiph-web