Css3 deformation description, css3 Deformation

Css3 deformation description, css3 Deformation

Transform Deformation: It can rotate, scale, tilt, and move text or images, and all the child elements under the element are the same as the parent element.

Since we are exposed to transform, we can do a good job of Multi-3d effects.

Rotation: transform: rotate (angle deg) deg is an angle unit defined in the "Values and Units" module of css3

<Div class = "box1"> </div>

. Box1 {width: 200px; height: 100px; background: # f66f17; margin: 60px 0;-webkit-transform: rotate (30deg); transform: rotate (30deg );}

Scale: transform: scale (scale) positive number indicates amplification, and negative number indicates reduction.

<Div class = "box2"> </div>

. Box2 {width: 200px; height: 100px; background: # f66f17; margin: 60px 0; -- webkit-transform: scale (2); transform: scale (2 );}

Skew: transform: skew (angle deg)

<Div class = "box3"> </div>

. Box3 {width: 200px; height: 100px;-webkit-transform: skew (30deg); transform: skew (30deg); background: # f66f17; margin-top: 60px ;}

<Div class = "box4">
Text
</Div>

. Box4 {color: # fff; font-size: 30px; font-weight: bold;-webkit-transform: translate (120px, 10px); transform: translate (120px, 10px ); width: 100px; height: 50px; background: #333 ;}

Familiar with this, it will be easier and convenient to do 3d effects.

If you have any questions, please submit them. Thank you.

 

New Features of css3

1: CSS3 Selector
E [att ^ = "val"] matches an Eelement with the att attribute and whose value starts with val.
E [att $ = "val"] matches an Eelement with the att attribute and whose values end with val.
E [att * = "val"] matches the Eelement with the att attribute and the value contains the val
E: root matches the root element of the document. In HTML, the root element is always HTML
E: nth-child (n) matches the nth child element E in the parent Element
E: nth-last-child (n) matches the last n child elements in the parent Element E
E: nth-of-type (n) matches the nth sibling Element E of the same type
E: nth-last-of-type (n) matches the nth sibling element of the same type. E
E: last-child matches the last Eelement in the parent element.
E: first-of-type matches the first Eelement In the sibling element.
E: only-child matches E that belongs to the unique child element of the parent element.
E: only-of-type matches E that belongs to the unique sibling element of the same type.
E: empty matches element E without any child elements (including text nodes ).
: Target matches the Eelement pointed to by the relevant URL
E: enabled matches all the available eElements in the form.
E: disabled matches all the eElements in the unavailable state in the form.
E: checked matches the selected Element E on all user interfaces (form forms ).
E: selection matches the selected or highlighted part of the E element.
E: not (s) matches all elements E that do not match the simple selector s.
E ~ F matches the F element after the Eelement

2. CSS3 special effect Part 1: rounded corner, shadow, gradient
Border-radius
Box-shadow
Text-shadow
-Webkit-gradient

3. CSS3 special effect Part 2: Background, border background
Background-origin
Background-clip
Background-size
Multiple backgrounds
Border-image

4. CSS3 special effect Part 3: Deformation
Rotate
X/Y/Z
Scale
... The remaining full text>

Explanation of Verb deformation in Japanese

Forward is a forward
ます is polite in or in the future
Assumed is a hypothetical form.
The basic form is the prototype.
Command form strong tone
What do you want the other party to do?
Passive by others
What can a possibly state table do?
What is the intention of a table?