CSS3 to achieve the projection effect

The WebKit engine defines the-webkit-box-reflect property, which enables the projection effect, with the following syntax:

-webkit-box-reflect: <direction> <offset> <mask-box-image>

The property values are described as follows:

<direction>: Defines the direction of reflection, which refers to including above, below, left, and right.

<offset>: Defines the distance of the reflection offset, including the value or percentage, where the percentage is determined by the size of the object and, if omitted, the default is 0.

<mask-box-image>: Defines the mask image that will overwrite the projected area. If the parameter value is omitted, the default is no matte image. You can also set a gradient or solid color overlay.

When the object source changes, the projection is automatically updated, and when the mouse passes over the object, you can see the mouse effect in the projection, and if the property is applied to the <video> label, you can also see the video play with the projection effect. The CSS reflections, such as text and video, can be applied to any object in the page, not just images.

The scale and reflection offsets of the projection do not affect the layout of the page.

Here is an example:

{      -webkit-box-reflect:below;} . Reflect2 {      -webkit-box-reflect:below 10px;} . Reflect3 {     -webkit-box-reflect:below 5px                         -webkit-gradient (linear,left top,left Bottom, from                          ( Transparent),                         color-stop (0.5,transparent), to (White));}

View Run effects

CSS3 to achieve the projection effect