How to achieve card image flip effect with css? (Special effects example)

When we browse multi-image websites, the display of static images alone is often too ordinary. It is far from enough to attract users. Interesting CSS animations are more eye-catching. So this article provides a detailed introduction to the special effects of CSS image flipping. It has certain reference value and I hope it will be helpful to friends in need.

css flip (picture) specific code example:

HTML code part

<div class="display back">
            <h3 id="css图片翻转示例">css图片翻转示例</h3>
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="image">
          <div class="display front">
            <img src="/static/imghw/default1.png"  data-src="img.jpg"  class="lazy"   alt="" />
          </div>

css code part:

* {
        padding: 0;
        margin: 0;
      }
      body {
        background-color: rgb(244, 244, 244);
      }
    
      .wrap {
        -webkit-perspective:400;
        -moz-perspective:400;
        float: left;
        width: 220px;
        margin-right: 20px;
      }
      .image {
        width: 100%;
        height: 200px;
        -webkit-transform-style:preserve-3d;
        -webkit-transition:1.5s;
        -moz-transform-style:preserve-3d;
        -moz-transition:1.5s;
      }
      img {
        width: 220px;
        height: 200px;
      }
      .wrap:hover .image {
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
      }
      .display {
        position: absolute;
        -webkit-backface-visibility:hidden;
        -moz-backface-visibility:hidden;
      }
      .display h3 {
        color: white;
        text-align: center;
      }
      .back {
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        background: -webkit-gradient(linear,left top,left bottom,from(#fdbb5a), to(#db5726));
        background: -moz-linear-gradient(top,#fdbb5a,#db5726);
        width: 220px;
        height: 200px;
        line-height: 200px;
      }

The effect of the above code is as follows:

css card flip effect allows you to see both sides of a card Content.

Note: The perspective attribute defines the distance of the 3D element from the view, in pixels. This property allows you to change the 3D element's view of the 3D element.

When you define the perspective attribute for an element, its child elements get the perspective effect, not the element itself. The perspective property only affects 3D transform elements.

Possible values ​​are:

number The distance of the element from the view, in pixels.

none Default value. Same as 0. No perspective is set.

【Recommended related articles】

How to use css to make images have a three-dimensional effect on the page? (Code actual test)

css to achieve image switching effect

Three ways to achieve image centering with CSS

CSS to layout images

The above is the detailed content of How to achieve card image flip effect with css? (Special effects example). For more information, please follow other related articles on the PHP Chinese website!