旋转：（rotate）
[css] view plain copy
-webkit-transform:rotate(10deg)
-moz-transform:rotate(10deg)
transform:rotate(10deg)
翻转：（scale）
(这个属性是放缩的功能，怎么能翻转的！原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转)
水平翻转：
[css] view plain copy
-webkit-transform:scale(-1，1)
-moz-transform:scale(-1，1)
transform:scale(-1，1)
垂直翻转：
[css] view plain copy
-webkit-transform:scale(1，-1)
-moz-transform:scale(1，-1)
transform:scale(1，-1)
/* 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>
给你两个翻转效果。。记得给我分哦。。。以下是全部代码。。。。按钮式点击出现效果！！！！！<!DOCTYPE html>
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/htmlcharset=GBK">
<meta charset="gb2312">
<style>
.animated_div
{
width:60px
height:40px
color:#ffffff
position:relative
font-weight:bold
padding:20px 10px 0px 10px
float:left
margin:20px
margin-right:50px
border:1px solid #888888
-webkit-border-radius:5px
-moz-border-radius:5px
border-radius:5px
font:12px Verdana, Arial, Helvetica, sans-serif
text-align:center
vertical-align:middle
}
#div1 {background:#92B901transform:rotate(30deg)-webkit-transform:rotate(30deg)-o-transform:rotate(30deg)-moz-transform:rotate(30deg)}
#div2 {background:#f98450transform:scale(2,2)-webkit-transform:scale(2,2)-o-transform:scale(2,2)-moz-transform:scale(2,2)}
#div3 {background:#1ec7e6transform:skew(30deg,20deg)-webkit-transform:skew(30deg,20deg)-o-transform:skew(30deg,20deg)-moz-transform:skew(30deg,20deg)}
#div1 {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844384, M12=-0.5000000000000004, M21=0.5000000000000004, M22=0.8660254037844384, SizingMethod=auto expand)"}
#div2 {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=2, M12=0, M21=0, M22=2, SizingMethod=auto expand)"}
#div3 {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.5773502691896265, M21=0.3639702342662022, M22=1, SizingMethod=auto expand)"}
#rotate1,#rotatey1
{
border:1px solid #000000
background:red
margin:10px
opacity:0.7
}
</style>
<script>
<!--
var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
x=document.getElementById("rotate1")
clearInterval(rotINT)
rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
y=document.getElementById("rotatey1")
clearInterval(rotYINT)
rotYINT=setInterval("startYRotate()",10)
}
function startRotate()
{
n=n+1
x.style.transform="rotate(" + n + "deg)"
x.style.webkitTransform="rotate(" + n + "deg)"
x.style.OTransform="rotate(" + n + "deg)"
x.style.MozTransform="rotate(" + n + "deg)"
if (n==180 || n==360)
{
clearInterval(rotINT)
if (n==360){n=0}
}
}
function startYRotate()
{
ny=ny+1
y.style.transform="rotateY(" + ny + "deg)"
y.style.webkitTransform="rotateY(" + ny + "deg)"
y.style.OTransform="rotateY(" + ny + "deg)"
y.style.MozTransform="rotateY(" + ny + "deg)"
if (ny==180 || ny>=360)
{
clearInterval(rotYINT)
if (ny>=360){ny=0}
}
}
//-->
</script>
<title>CSS3 3D 转换</title>
</head>
<body class="html" id="tags">
<div onclick="rotateDIV()" id="rotate1" class="animated_div" style="-webkit-transform: rotate(180deg)">2D 旋转</div>
<div onclick="rotateYDIV()" id="rotatey1" class="animated_div" style="-webkit-transform: rotateY(180deg)">3D 翻转</div>
</body></html>
