Css

CSS 3D flip card animation

CSS 3D flip card animation, someone asked me to explain?
Css

CSS 3D flip card animation

The effect of this CSS flip card is that there will be a cool rotation when the mouse rolls over, showing the back card below, and it has a glowing effect. Share this code below:

HTML CODE:

<div class="flip">
    <div class="flip-box">
        <a href="http://infinetsoft.com/" target="_blank" class="flip-item flip-item-front">
            <img src="~/img/html.png" />
            <span class="flip-item-text">Front-end Development blog</span>
        </a>

        <a href="http://www.infinetsoft.com/Post/Shape-separator-CSS-examples/2772" target="_blank" class="flip-item flip-item-back">
            <div class="flip-item-bling"></div>
            <img src="~/img/manong.jpg" alt="">
            <span class="flip-item-text">Learn .net</span>
        </a>
    </div>
</div>

CSS CODE:

.flip{    
transform: translate3d(0,0,0);
    margin: 40px;
}
 .flip-box {
    position: relative;
    width: 110px;
    height: 140px;
    overflow: hidden;
}
 .flip-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in-out;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border: 1px solid #ddd;
    box-sizing: border-box;
}
     .flip-item img {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        margin: 32px auto;
        display: block;
    }
 .flip-item-text {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
}
 .flip-item-front {
    transform: rotateY(0deg);
    z-index: 2;
    background: #fff;
}
 .flip-item-back {
    transform: rotateY(180deg);
    z-index: 1;
    background: #009fff;
}
     .flip-item-back .flip-item-text {
        color: #fff;
    }
 .flip-box:hover .flip-item-front {
    z-index: 1;
    transform: rotateY(180deg);
}
 .flip-box:hover .flip-item-back {
    z-index: 2;
    transform: rotateY(0deg);
}
 .flip-item-bling {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    background: url(../img/animation.png) center no-repeat;
    z-index: -1;
}
 .flip-box:hover .flip-item-bling {
    transform: translate3d(0,0,0);
    animation: rotate infinite 10s linear;
}
 @keyframes rotate {
    0% {
        transform-origin: center;
        transform: rotate3d(0,0,1,0deg);
    }
     100% {
        transform-origin: center;
        transform: rotate3d(0,0,1,360deg);
    }
}

Definition and usage

The backface-visibility property defines whether the element is visible when it is not facing the screen.

This property is useful if the rotating element does not want to see its back side.

CSS3 transform-style Property

Make the converted child element retain its 3D transformation:

div{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari Chrome */
-webkit-transform-style: preserve-3d;    /* Safari Chrome */
}

The transform-style property specifies how the nested elements are rendered in 3D space.

valuedescription
flatChild elements will not retain their 3D position.
preserve-3dChild elements will retain their 3D position.

CSS3 transform property

The transform property applies a 2D or 3D transformation to the element. This property allows us to rotate, scale, move, or tilt an element.

noneThe definition does not convert.
matrix(n,n,n,n,n,n)Define a 2D transformation using a matrix of six values.
matrix3d ( n , n , n , n , n , n , n , n , n , n , n , n , n , n , n , n )Define a 3D transformation using a 4x4 matrix of 16 values.
translate(x,y)Define a 2D transformation.
translate3d(x,y,z)Define a 3D transformation.
translateX(x)Define the transformation, just use the value of the X axis.
translateY ( y )Define the transformation, just use the value of the Y axis.
translateZ ( z )Define a 3D transformation, just use the value of the Z axis.
stairs ( x , y )Define 2D scaling transformations.
scale3d(x,y,z)Define a 3D scaling transformation.
scaleX(x)Define the scaling transformation by setting the value of the X axis.
scaleY(y)Define the scaling conversion by setting the value of the Y axis.
scaleZ ( z )Define the 3D scaling transformation by setting the value of the Z axis.
rotate(angle)Define a 2D rotation and specify the angle in the parameter.
rotate3d(x,y,z,angle)Define 3D rotation.
rotateX(angle)Define a 3D rotation along the X axis.
rotateY(angle)Define a 3D rotation along the Y axis.
rotateZ(angle)Define a 3D rotation along the Z axis.
skew(x-angle,y-angle)Define a 2D tilt transition along the X and Y axes.
skewX(angle)Define a 2D tilt transition along the X axis.
skewY(angle)Define a 2D tilt transition along the Y axis.
perspective(n)Define a perspective view for the 3D transform element.

CSS3 perspective attribute

Set the view of where the element is viewed:

div{
perspective: 500;
-webkit-perspective: 500; / * Safari Japanese Chrome * /
}

The perspective property defines the distance of the 3D element from the view, in pixels. This property allows you to change the view of the 3D element by viewing the 3D element.

When you define a perspective property for an element, its child elements get a perspective effect, not the element itself.

to sum up:

When using CSS 3D transform properties, turn on GPU hardware acceleration , transform:translate3d(0,0,0);and use the above code to improve performance.

To better understand this case, you need to be familiar with the use of these attributes. The corresponding prefix is ​​not added to the above CSS code. Please use the autoprefixer plugin to add it yourself .

The following table lists all the conversion properties:

AttributesdescriptionCSS
transformApply a 2D or 3D transformation to the element.3
transform-originAllows you to change the position of the converted element.3
transform-styleSpecifies how nested elements are displayed in 3D space.3
perspectiveSpecifies the perspective of the 3D element.3
perspective-originSpecifies the bottom position of the 3D element.3
backface-visibilityDefines whether the element is visible when it is not facing the screen.3

Post your comments / questions