Overview pure CSS Implementation of Honeycomb Hexagon personality album detailed code download: http://www.demodashi.com/demo/12804.html
This case is mainly used for the transform and transition properties of CSS3, and the Nth-child () selector
First, the preparatory work
1, the main application to the CSS3 3D transform transformation
Transform: Applies a 2D or 3D conversion to an element. This property allows us to rotate, scale, move, or skew elements
value |
Description |
Test |
None |
The definition does not convert. |
Test |
Matrix (N,n,n,n,n,n) |
Defines a 2D conversion, using a matrix of six values. |
Test |
Matrix3D (N,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D conversion, using a 4x4 matrix of 16 values. |
|
Translate (x, y) |
Defines a 2D transformation. |
Test |
Translate3d (x, Y, z) |
Defines a 3D transformation. |
|
TranslateX (x) |
Define the conversion, just with the value of the X-axis. |
Test |
Translatey (y) |
Define the conversion, just use the Y-axis value. |
Test |
Translatez (z) |
Defines a 3D conversion, just using the Z-axis value. |
|
Scale (x, y) |
Defines a 2D scaling transformation. |
Test |
Scale3d (x, Y, z) |
Defines a 3D scaling transformation. |
|
ScaleX (x) |
Define the zoom transformation by setting the value of the X-axis. |
Test |
ScaleY (y) |
Define the zoom transformation by setting the value of the Y-axis. |
Test |
Scalez (z) |
Define a 3D scaling transformation by setting the value of the Z-axis. |
|
Rotate (angle) |
Defines the 2D rotation, which specifies the angle in the parameter. |
Test |
Rotate3d (X,y,z,angle) |
Defines the 3D rotation. |
|
Rotatex (angle) |
Defines the 3D rotation along the X-axis. |
Test |
Rotatey (angle) |
Defines a 3D rotation along the Y-axis. |
Test |
Rotatez (angle) |
Defines a 3D rotation along the Z-axis. |
Test |
Skew (X-angle,y-angle) |
Defines a 2D tilt transition along the X and Y axes. |
Test |
Skewx (angle) |
Defines a 2D tilt transition along the X-axis. |
Test |
Skewy (angle) |
Defines a 2D tilt transition along the Y-axis. |
Test |
Perspective (N) |
Defines a Perspective view for 3D transformation elements. |
Test
|
2. Transition Properties
The Transition property is a shorthand property for setting four transition properties:
Note: Always set the Transition-duration property, otherwise the duration is 0, and there is no transition effect.
value |
Description |
Transition-property |
Specifies the name of the CSS property that sets the transition effect. |
Transition-duration |
Specifies how many seconds or milliseconds to complete the transition effect. |
Transition-timing-function |
Speed curve that specifies the speed effect. |
Transition-delay |
Defines when the transition effect starts. |
3. Nth-child () Selector
Definition and usage
: the Nth-child (n) selector matches the nth child element that belongs to its parent element, regardless of the type of the element.
n can be a number, a keyword, or a formula.
Tip: See: Nth-of-type () selector, which selects child elements of the nth specified type of a parent element.
Second, the implementation of the program
Implementation process:
1, write HTML.
<li class= "hex" > <a class= "hexin" href= "#" >
2. Write style class with hexagonal border and animation effect.
. Hex * { position:absolute; visibility:visible; outline:1px solid Transparent; /* fix for jagged edges in FF on hover transition */}
. hexin:hover H1,. Hexin:focus h1,.hexin:hover P,. Hexin:focus p{ -webkit-transform:translatey (0%) Translatez ( -1px ); -ms-transform:translatey (0%) Translatez ( -1px); Transform:translatey (0%) Translatez ( -1px);}
Third, the file, the operation1. Documents:
By rendering each Li into a six-angle shape, and realizing the effect of auto-embedding, the result is "honeycomb", and each li contains a-tag, which can be used to realize the animated effect of CSS3 the title and explanatory text by the mouse.
2. Operation:
Open index.html to see the final effect. (compatible with mainstream browsers such as Ie9+,chrome,firefox,safari)
Code Download: http://www.demodashi.com/demo/12804.html Note: This copyright belongs to the author, published by the demo master, refused to reprint, reprint needs the author authorizationPure CSS to achieve a personalized album of Honeycomb Hexagon