Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #36611
| Newsgroups | comp.lang.javascript |
|---|---|
| Subject | Re: TWO lines of code for transforms? |
| From | "Evertjan." <exxjxw.hannivoort@inter.nl.net> |
| References | (2 earlier) <a6aa0673-cce7-47c7-a97a-635cd0c22fbc@googlegroups.com> <877eauo7g0.fsf@bsb.me.uk> <ef5f0cce-7f0a-4efb-9367-1848456865b1@googlegroups.com> <87v9yemiv7.fsf@bsb.me.uk> <bffd7eca-b054-46ab-9ea6-81403cddb8b2@googlegroups.com> |
| Date | 2019-05-15 09:43 +0200 |
| Message-ID | <XnsAA5062FC1B4CBeejj99@194.109.6.166> (permalink) |
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)
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread
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
csiph-web