css3 圖片旋轉效果 以y軸翻轉效果等
阿新 • • 發佈：2019-02-11
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題</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 讓一個圖片不斷翻轉示例程式碼 */
#gavinPlay{
/* background:color url x y repeat 圖片來自百度圖片，按需要更換 */
background: url("dot.png") center no-repeat;
/* background-size:auto auto || cover 代表以寬或高填滿元素背景 */
background-size:cover;
/* 隨便設定寬高值，測試 */
width:55px;
height:55px;
/* 設定預設樣式，開啟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(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">
<!-- html 佈局程式碼 -->
<div id="gavinPlay"></div>
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題</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 讓一個圖片不斷翻轉示例程式碼 */
#gavinPlay{
/* background:color url x y repeat 圖片來自百度圖片，按需要更換 */
background: url("dot.png") center no-repeat;
/* background-size:auto auto || cover 代表以寬或高填滿元素背景 */
background-size:cover;
/* 隨便設定寬高值，測試 */
width:55px;
height:55px;
/* 設定預設樣式，開啟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(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">
<!-- html 佈局程式碼 -->
<div id="gavinPlay"></div>
</body>
</html>
