怎样用CSS实现图片翻转

html-css019

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

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

方法一：

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

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

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

方法二：

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

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

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

/* css3 让一个图片不断翻转示例代码 */

#gavinPlay{

/* background:color url x y repeat 图片来自百度图片，按需要更换 */

background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat

/* background-size:auto auto || cover 代表以宽或高填满元素背景 */

background-size:cover

/* 随便设置宽高值，测试 */

width:200px

height:200px

/* 设置默认样式，开启3d硬件加速 */

-webkit-transform:translate3d(0,0,0)

-moz-transform:translate3d(0,0,0)

transform:translate3d(0,0,0)

/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放 */

-webkit-animation:play 3s linear infinite

-moz-animation:play 3s linear infinite

animation:play 3s linear infinite

}

@-webkit-keyframes play{

0%  {

/*

水平翻转

*/

-webkit-transform:rotateY(0deg)

/*

垂直翻转

-webkit-transform:rotateX(0deg)

顺时针旋转

-webkit-transform:rotate(0deg)

逆时针旋转

-webkit-transform:rotate(0deg)

*/

}

100% {

/* 水平翻转 */

-webkit-transform:rotateY(360deg)

/* 垂直翻转

-webkit-transform:rotateX(360deg)

顺时针旋转

-webkit-transform:rotate(360deg)

逆时针旋转

-webkit-transform:rotate(-360deg)

*/

}

}

@-moz-keyframes play{

0%  {

-moz-transform:rotateY(0deg)

/*

-moz-transform:rotateX(0deg)

-moz-transform:rotate(0deg)

-moz-transform:rotate(0deg)

*/

}

100% {

-moz-transform:rotateY(360deg)

/*

-moz-transform:rotateX(360deg)

-moz-transform:rotate(360deg)

-moz-transform:rotate(-360deg)

*/

}

}

@keyframes play{

0%  {

transform:rotateY(0deg)

/*

transform:rotateX(0deg)

transform:rotate(0deg)

transform:rotate(0deg)

*/

}

100% {

transform:rotateY(360deg)

/*

transform:rotateX(360deg)

transform:rotate(360deg)

transform:rotate(-360deg)

*/

}

} <!-- html 布局代码 -->

<div id="gavinPlay"></div>