當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3 图片旋转效果以y轴翻转效果等

發(fā)布時(shí)間：2024/1/18 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 css3 图片旋转效果以y轴翻转效果等小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />?
<title>無標(biāo)題</title>
<style>

#gavinPlay{
background:red url("dot.png") center no-repeat;

transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */

}

/* css3 讓一個(gè)圖片不斷翻轉(zhuǎn)示例代碼 */
#gavinPlay{
/* background:color url x y repeat 圖片來自百度圖片，按需要更換 */
background: url("dot.png") center no-repeat;
/* background-size:auto auto || cover 代表以寬或高填滿元素背景 */
background-size:cover;
/* 隨便設(shè)置寬高值，測(cè)試 */
width:55px;
height:55px;
/* 設(shè)置默認(rèn)樣式，開啟3d硬件加速 */
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
/* 設(shè)置動(dòng)畫，animation:動(dòng)畫名稱動(dòng)畫播放時(shí)長(zhǎng)單位秒或微秒動(dòng)畫播放的速度曲線linear為勻速動(dòng)畫播放次數(shù)infinite為循環(huán)播放; */
-webkit-animation:play 3s linear infinite;
-moz-animation:play 3s linear infinite;
animation:play 3s linear infinite;
}

@-webkit-keyframes play{
0% ?{
/*
水平翻轉(zhuǎn)
-webkit-transform:rotateY(0deg);
*/
/*
垂直翻轉(zhuǎn)
-webkit-transform:rotateX(0deg);
順時(shí)針旋轉(zhuǎn)*/

-webkit-transform:rotate(0deg);
/*逆時(shí)針旋轉(zhuǎn)
-webkit-transform:rotate(0deg);
*/
}
100% {
/* 水平翻轉(zhuǎn)?
-webkit-transform:rotateY(360deg);*/
/* 垂直翻轉(zhuǎn)
-webkit-transform:rotateX(360deg);
順時(shí)針旋轉(zhuǎn)
*/
-webkit-transform:rotate(360deg);
/*逆時(shí)針旋轉(zhuǎn)
-webkit-transform:rotate(-360deg);
*/
}
}

@-moz-keyframes play{
0% ?{

/*-moz-transform:rotateY(360deg);
-moz-transform:rotateX(0deg);
*/-moz-transform:rotate(0deg);
/*-moz-transform:rotate(0deg);
*/
}
100% {

/*-moz-transform:rotateY(0deg);
-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);
*/
}
}

</style>
</head>
<body style ="background:gray">



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

</html>

總結(jié)

以上是生活随笔為你收集整理的css3 图片旋转效果以y轴翻转效果等的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：计算机标准用户怎么改成管理员,win7系
下一篇： 30张设计师的手绘网页草图（原型图/框架

编程问答

css3 图片旋转效果 以y轴翻转效果等

總結(jié)

css3 图片旋转效果以y轴翻转效果等