Pure CSS to achieve a personalized album of Honeycomb Hexagon

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:

• Transition-property

• Transition-duration

• Transition-timing-function

• Transition-delay

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 operation
1. 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 authorization
Pure CSS to achieve a personalized album of Honeycomb Hexagon