怎样用CSS实现图片翻转

html-css014

怎样用CSS实现图片翻转,第1张

以实现一张图片双面翻转为例:

方法一:

1、实现CSS样式的方法代码如下。

2、实现前端布局的方法代码如下。

3、实现图片翻转CSS样式代码如下。

方法二:

1、实现正反面效果的HTML的方法代码如下。

2、实现CSS样式的方法代码。

3、然后实现竖向翻转的方法代码如下。

css实现圆环旋转加载

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css实现圆环旋转加载</title>

<style>

*{

margin:0

padding:0

}

#outbox{

position:relative/*相对定位*/

width:100px/*宽度100px*/

height:100px/*高度100px*/

background:orange/*背景色橙色*/

border-radius:50%/*圆角50%*/

margin:100px/*外侧边距100px*/

}

#outbox::before{/*前置伪元素*/

content:""/*内容空*/

display:block/*块元素*/

position:absolute/*绝对定位*/

width:80px/*宽度80px*/

height:80px/*高度80px*/

left:10px/*左边距10px*/

top:10px/*距离顶部10px*/

border-radius:50%/*圆角50%*/

background:white/*背景色白色*/

}

#outbox::after{/*后置伪元素*/

content:""/*内容为空*/

display:block/*转为块元素*/

position:absolute/*绝对定位*/

width:100px/*宽度100px*/

height:100px/*高度100px*/

top:0/*距离父容器顶部边距0*/

left:0/*距离入容器左边距0*/

border-radius:50%/*圆角50%*/

background:white/*背景色白色*/

animation:myfirst 1s both linear infinite/*绑定动画。为了看清楚效果,设置动画反复执行。使用的时候只执行一次就好了*/

-webkit-animation:myfirst 1s both linear infinite/* Safari and Chrome */

}

@keyframes myfirst/*动画开始*/

{

0%{

-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0, 100% 0)/*不裁剪的初始效果*/

clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0, 100% 0)

}

40%{

-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0, 0 0)/*裁剪四分之一*/

clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0, 0 0)

}

60%{

-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 100%, 0 100%)/*裁剪四分之二*/

clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 100%, 0 100%)

}

90%{

-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%)/*裁剪四分之三*/

clip-path: polygon(50% 50%, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%)

}

100%{

-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 100% 0, 100% 0, 100% 0)/*裁剪四分之四*/

clip-path: polygon(50% 50%, 100% 0, 100% 100%, 100% 0, 100% 0, 100% 0)

}

}

</style>

</head>

<body>

<div id="outbox"></div>

</body>

</html>

<!--裁剪比较粗糙,如果要更顺滑,可以裁剪得更细腻一点,比如裁剪十分之一,十分之二,十分之三,以此类推一直到十分之十。-->

你好,分析了一下你的问题:

直接对某个元素使用transform沿着对角线翻转似乎实现不了

但是可以在其外部嵌套一个盒子间接实现,我写了一个简单的demo:

<style>

.pers {

    margin: 100px auto 0

    width: 200px

    height: 200px

    border: 1px dashed #ccc

}

.rotater {

    width: 200px

    height: 200px

    -webkit-transition: -webkit-transform .5s ease-out

    -o-transition: -o-transform .5s ease-out

    transition: transform .5s ease-out

    -webkit-transform: rotate(45deg)

    -ms-transform: rotate(45deg)

    -o-transform: rotate(45deg)

    transform: rotate(45deg)

    overflow: hidden

}

.pers:hover .rotater {

    -webkit-transform: rotate(45deg) rotateY(180deg)

    -ms-transform: rotate(45deg) rotateY(180deg)

    -o-transform: rotate(45deg) rotateY(180deg)

    transform: rotate(45deg) rotateY(180deg)

}

.main {

    margin: 50px 0 0 50px

    width: 100px

    height: 100px

    line-height: 100px

    text-align: center

    font-size: 90px

    border: 1px solid #ccc

    background-color: #333

    color: #fff

    font-weight: bold

    -webkit-transform: rotate(-45deg)

    -ms-transform: rotate(-45deg)

    -o-transform: rotate(-45deg)

    transform: rotate(-45deg)

}

</style>

<div class="pers">

    <div class="rotater">

        <div class="main">|</div>

    </div>

</div>

希望能解决你的问题,或者能给你一点启发也是好的。

如有疑问请追问,望采纳~