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.
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.
| value | description |
|---|---|
| flat | Child elements will not retain their 3D position. |
| preserve-3d | Child elements will retain their 3D position. |
The transform property applies a 2D or 3D transformation to the element. This property allows us to rotate, scale, move, or tilt an element.
| none | The 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. |
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.
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:
| Attributes | description | CSS |
|---|---|---|
| transform | Apply a 2D or 3D transformation to the element. | 3 |
| transform-origin | Allows you to change the position of the converted element. | 3 |
| transform-style | Specifies how nested elements are displayed in 3D space. | 3 |
| perspective | Specifies the perspective of the 3D element. | 3 |
| perspective-origin | Specifies the bottom position of the 3D element. | 3 |
| backface-visibility | Defines whether the element is visible when it is not facing the screen. | 3 |