CSS's most commonly used flip effects-CSS Tutorial-php.cn

CSS's most commonly used flip effects

PHPz

Release： 2017-03-24 16:49:19

Original

1981 people have browsed it

第一个：360度翻转特效

<style>
* {
    margin:0;
    padding:0;
}
.aa {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background: no-repeat url("images/author.jpg") left top;
    -webkit-background-size: 220px 220px;
    -moz-background-size: 220px 220px;
    background-size: 220px 220px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
}
.aa:hover {
    -webkit-transform: rotateZ(360deg); /*transform  transition 以及 边角的弧度 border-radius 要考虑兼容性的问题*/
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
</style><body><p class="aa"></p></body>

Copy after login

第二种：照片墙悬挂效果

<style>body{font-family:Tahoma,Helvetica,"\5b8b\4f53","Arial",sans-serif;font-size:12px;color:#fff;}
            body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
            input,button,textarea{border:none 0}
            fieldset,img{border:0}
            table{border-collapse:collapse;border-spacing:0}
            ul,ol{list-style:none}
            a:link{text-decoration:none}
            a:visited{text-decoration:none}
            a:hover{text-decoration:none}
            
            .clear{zoom:1}
            .clear:after{content:"";display:block;clear:both}/* polaroids */.polaroids{width:100%;margin:0 0 18px 10px;}.polaroids li{display: inline;}.polaroids a{background: #fff;display: inline;float:left;margin:0 0 27px 30px;width:auto;padding:10px 10px 15px;text-align: center;font-family: "Marker Felt", sans-serif;text-decoration: none;color:#333;font-size: 18px;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);-o-box-shadow:0 3px 6px rgba(0,0,0,.25);box-shadow:0 3px 6px rgba(0,0,0,.25);}.polaroids img{display: block;width:190px;margin-bottom:12px;}.polaroids a:after{content: attr(title);/* Ie8+,FF,Chorme,Safari */}
.polaroids li:nth-child(even) a{
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    transform:rotate(2deg);
}
.polaroids li:nth-child(3n) a{
    -webkit-transform:none;
    -moz-transform:none;
    -ms-transform:rotate(2deg);
    transform:none;
    position: relative;
    top:-5px;
}
.polaroids li:nth-child(5n) a{
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    -ms-transform:rotate(5deg);
    transform:rotate(5deg);
    position: relative;
    right:5px;
}
.polaroids li:nth-child(8n) a{
    position: relative;
    top:8px;
    right:5px;
}
.polaroids li:nth-child(11n) a{
    position: relative;
    top:3px;
    right:-5px;
}
.polaroids li a:hover{
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    transform:scale(1.25);
    -webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);
    -moz-box-shadow:0 3px 6px rgba(0,0,0,.5);
    -o-box-shadow:0 3px 6px rgba(0,0,0,.5);
    box-shadow:0 3px 6px rgba(0,0,0,.5);
    position: relative;
    z-index: 5;
}
.polaroids li.messy a{margin-top:-375px;margin-left:160px;
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    transform:rotate(-5deg);
}

</style>

<body>
<ul class="polaroids">
            <li><a href="#" title="Roelan"><img src="images/image-01.jpg" alt="Roeland!"></a></li>
            <li><a href="#" title="Discus"><img src="images/image-02.jpg" alt="Discussion"></a></li>
            <li><a href="#" title="A Hear"><img src="images/image-01.jpg" alt="A Hearty Laugh"></a></li>
            <li><a href="#" title="Evil M"><img src="images/image-02.jpg" alt="Evil Matt Coding"></a></li>
            <li><a href="#" title="Scribb"><img src="images/image-01.jpg" alt="Scribbles"></a></li>
            <li><a href="#" title="Amanda"><img src="images/image-02.jpg" alt="Amanda Glares..."></a></li>
            <li><a href="#" title="The Do"><img src="images/image-01.jpg" alt="The Dougernaut"></a></li>
            <li><a href="#" title="I See "><img src="images/image-02.jpg" alt="I See You!"></a></li>
            <li><a href="#" title="Rock H"><img src="images/image-01.jpg" alt="Rock Hard Balls"></a></li>
            <li><a href="#" title="Bocce "><img src="images/image-02.jpg" alt="Bocce Ball"></a></li>
            <li><a href="#" title="Boris "><img src="images/image-01.jpg" alt="Boris "Tatooine""></a></li>
            <li><a href="#" title="Sneake"><img src="images/image-02.jpg" alt="Sneakers & Stilettos"></a></li>
        </ul>
        <ul class="polaroids" style="width:280px;">
            <li><a href="#" title="Roelan"><img src="images/image-01.jpg" alt="Roeland!"></a></li>
            <li><a href="#" title="Discus"><img src="images/image-02.jpg" alt="Discussion"></a></li>
            <li class="messy"><a href="#" title="A Hear"><img src="images/image-01.jpg" alt="A Hearty Laugh"></a></li>
        </ul>
</body>

Copy after login

简单做出HTML5翻页效果文字特效

css实现3D立方体旋转特效的示例代码

详细介绍HTML5 3D衣服摇摆动画特效如何实现

The above is the detailed content of CSS's most commonly used flip effects. For more information, please follow other related articles on the PHP Chinese website!