JSFiddle - React, Tailwind, and code Playground

by miaosen feng

HTML

<div class="wrap img">
            <div class="shadow">
                <div class="photo">
                    <div class="front img"></div>
                    <div class="back">
                        <h2>刘诗诗</h2>
                        <p>
                            1978-03-10<br/>
                            双鱼座
                        </p>
                    </div>
                </div>
            </div>
        </div>

CSS

.wrap {
                width: 200px;
                height: 200px;
                border-radius: 200px;
                overflow: hidden;
                margin: 200px auto;
            }
            
            .img {
                background: url("http://image.tianjimedia.com/uploadImages/2015/252/54/FP4M6Q7D45FP.jpg") center;
                background-size: 200px;
            }
            
            .shadow {
                width: 160px;
                height: 160px;
                border-radius: 160px;
                background: #fff;
                margin: 20px;
                box-shadow: 0 0 0 20px rgba(255,255,255,.4);
                
                -webkit-transition: box-shadow 0.5s ease-in-out;
                -moz-transition: box-shadow 0.5s ease-in-out;
                -ms-transition: box-shadow 0.5s ease-in-out;
                -o-transition: box-shadow 0.5s ease-in-out;
                transition: box-shadow 0.5s ease-in-out;
            }
            
            .photo {
                width: 160px;
                height: 160px;
                position: relative;
            }
            
            .front,.back {
                position: absolute;
                width: 160px;
                height: 160px;
                border-radius: 160px;
                overflow: hidden;
                
                -webkit-transform-style: preverve-3d;
                transform-style: preverve-3d;
                
                -webkit-backface-visibitity: hidden;
                -moz-backface-visibitity: hidden;
                backface-visibility: hidden;
                
                -webkit-transition: transform 0.5s ease-in-out;
                -moz-transition: transform 0.5s ease-in-out;
                -ms-transition: transform 0.5s ease-in-out;
                -o-transition: transform 0.5s ease-in-out;
                transition: transform 0.5s ease-in-out;
                
                
            }
          ...