/*entire container, keeps perspective*/

/**

* 【perspective: number|none;】

* 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。

* 當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。*/.flip-container{perspective:1000;}

/*flip the pane when hovered*/.flip-container:hover .flipper, .flip-container.hover .flipper{transform:rotateY(180deg);}.flip-container, .front, .back{width:320px;height:480px;}

/*flip speed goes here*/

/**

* 【transition: property duration timing-function delay;】

* 過渡動畫 (transition: width 2s;)

* transition-property：規定設置過渡效果的 CSS 屬性的名稱。(width)

* transition-duration：規定完成過渡效果需要多少秒或毫秒。(2s)

* transition-timing-function：規定速度效果的速度曲線。(ease-in-out)

* transition-delay：延遲時間，以秒或毫秒計。*/

/**

* 【transform-style: flat|preserve-3d;】

* 使被轉換的子元素保留其 3D 轉換

* flat：子元素將不保留其 3D 位置。

* preserve-3d：子元素將保留其 3D 位置。*/.flipper{transition:0.6s;transform-style:preserve-3d;position:relative;}

/*hide back of pane during swap*/

/**

* 【backface-visibility: visible|hidden;】

* 定義當元素背面是否可見。*/.front, .back{backface-visibility:hidden;position:absolute;top:0;left:0;}

/*front pane, placed above back*/.front{z-index:2;}

/*back, initially hidden pane*/.back{transform:rotateY(180deg);}

總結

以上是生活随笔為你收集整理的mr图像翻转的原因_CSS图片翻转例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。