2d旋转动画

HTML5 2020-08-25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<style type="text/css">

div {

    margin:100px 0;

    width: 400px;

    height: 100px;

    background:url(images/bg1.jpg)center;

}

div:hover {

    /* 定义动画的状态 */

    -webkit-transform: rotate(-90deg);

    -moz-transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

    -transform: rotate(-90deg);

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

 

}

</style>

</head>

 

<body>

<div></div>

</body>

</html>


缩放

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<style type="text/css">

.test ul { list-style:none; }

.test li {

    float:left;

    width:100px;

    background:#CCC;

    margin-left:3px;

    line-height:30px;

}

.test a {

    display:block;

    text-align:center;

    height:30px;

}

.test a:link {

    color:#666;

    background:url(images/icon1.jpg)#CCC no-repeat 5px 12px;

    text-decoration:none;

}

.test a:visited {

    color:#666;

    text-decoration:underline;

}

.test a:hover {

    color:#FFF;

    font-weight:bold;

    text-decoration:none;

    background:url(images/icon2.jpg)#F00 no-repeat 5px 12px;

    -webkit-transform: scale(2);

    -moz-transform: scale(2);

    -o-transform: scale(2);

}

</style>

</head>

 

<body>

<div class="test">

    <ul>

        <li><ahref="1">首页</a></li>

        <li><ahref="2">新闻</a></li>

        <li><ahref="3">论坛</a></li>

        <li><ahref="4">博客</a></li>

        <li><ahref="5">团购</a></li>

        <li><ahref="6">微博</a></li>

    </ul>

</div>

</body>

</html>

 

 偏移

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>translate()函数</title>

<style type="text/css">

.test ul { list-style:none; }

.test li {

    float:left;

    width:100px;

    background:#CCC;

    margin-left:3px;

    line-height:30px;

}

.test a {

    display:block;

    text-align:center;

    height:30px;

}

.test a:link {

    color:#666;

    background:url(images/icon1.jpg)#CCC no-repeat 5px 12px;

    text-decoration:none;

}

.test a:visited {

    color:#666;

    text-decoration:underline;

}

.test a:hover {

    color:#FFF;

    font-weight:bold;

    text-decoration:none;

    background:url(images/icon2.jpg)#F00 no-repeat 5px 12px;

    -moz-transform: translate(4px,4px);

    -webkit-transform: translate(4px,51)">    -o-transform: translate(4px,4px);

}

</style>

</head>

 

<body>

<div class="test">

    <ul>

        <li><ahref="1">首页</a></li>

        <li><ahref="2">新闻</a></li>

        <li><ahref="3">论坛</a></li>

        <li><ahref="4">博客</a></li>

        <li><ahref="5">团购</a></li>

        <li><ahref="6">微博</a></li>

    </ul>

</div>

</body>

</html>

 


倾斜

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>translate()函数</title>

<style type="text/css">

.test ul { list-style:none; }

.test li {

    float:left;

    width:100px;

    background:#CCC;

    margin-left:3px;

    line-height:30px;

}

.test a {

    display:block;

    text-align:center;

    height:30px;

}

.test a:link {

    color:#666;

    background:url(images/icon1.jpg)#CCC no-repeat 5px 12px;

    text-decoration:none;

}

.test a:visited {

    color:#666;

    text-decoration:underline;

}

.test a:hover {

    color:#FFF;

    font-weight:bold;

    text-decoration:none;

    background:url(images/icon2.jpg)#F00 no-repeat 5px 12px;

    -moz-transform: skew(30deg,-10deg);

    -webkit-transform: skew(30deg,-10deg);

    -o-transform: skew(30deg,-10deg);

}

</style>

</head>

 

<body>

<div class="test">

    <ul>

        <li><ahref="1">首页</a></li>

        <li><ahref="2">新闻</a></li>

        <li><ahref="3">论坛</a></li>

        <li><ahref="4">博客</a></li>

        <li><ahref="5">团购</a></li>

        <li><ahref="6">微博</a></li>

    </ul>

</div>

</body>

</html>

 

变形

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<style type="text/css">

.test ul { list-style:none; }

.test li {

    float:left;

    width:100px;

    background:#CCC;

    margin-left:3px;

    line-height:30px;

}

.test a {

    display:block;

    text-align:center;

    height:30px;

}

.test a:link {

    color:#666;

    background:url(images/icon1.jpg)#CCC no-repeat 5px 12px;

    text-decoration:none;

}

.test a:visited {

    color:#666;

    text-decoration:underline;

}

.test a:hover {

    color:#FFF;

    font-weight:bold;

    text-decoration:none;

    background:url(images/icon2.jpg)#F00 no-repeat 5px 12px;

    -moz-transform: matrix(1,0.4,1,0);

    -webkit-transform: matrix(1,0);

    -o-transform: matrix(1,0);

}

 

</style>

</head>

 

<body>

<div class="test">

    <ul>

        <li><ahref="1">首页</a></li>

        <li><ahref="2">新闻</a></li>

        <li><ahref="3">论坛</a></li>

        <li><ahref="4">博客</a></li>

        <li><ahref="5">团购</a></li>

        <li><ahref="6">微博</a></li>

    </ul>

</div>

</body>

</html>

 


自定义变形

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

body { background:#fffurl(images/bg3.JPG); }

ul.polaroids { margin-left:120px; }

ul.polaroids li { display: inline; }

ul.polaroids a {

    background: #fff;

    display: inline;

    float: left;

    margin: 0 0 27px30px;

    width: auto;

    padding: 10px10px 15px;

    text-align: center;

    text-decoration: none;

    color: #333;

    -webkit-Box-shadow: 0 3px6px rgba(0,.25);

    -moz-Box-shadow: 0 3px6px rgba(0,.25);

 

}

ul.polaroids img {

    display: block;

    height: 140px;

    margin-bottom: 12px;

}

ul.polaroids a:after { content: attr(title); }

ul.polaroids li:nth-child(1)a {

    -moz-transform-origin: 0 0;

    -webkit-transform-origin: 0 0;

    -o-transform-origin: 0 0;   

    -webkit-transform: rotate(30deg);

    -moz-transform: rotate(30deg);

    -o-transform: rotate(30deg);   

}

ul.polaroids li:nth-child(2)a {

    -moz-transform-origin: topright;

    -webkit-transform-origin: topright;

    -o-transform-origin: topright;   

    -webkit-transform: rotate(-30deg);

    -moz-transform: rotate(-30deg);

    -o-transform: rotate(-30deg);   

}

</style>

</head>

 

<body>

<ul class="polaroids">

    <li> <a href="1" title="亲亲狗狗"> <img src="images/44.jpg" title="左上角为原点，顺时针旋转60度" /> </a> </li>

    <li> <a href="2" title="狗狗生气了"> <img src="images/66.jpg" title="右上角为原点，逆时针旋转60度" /> </a> </li>

</ul>

</body>

</html>

 




复杂行变

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

body{ background:#000; }

img {

    position: absolute;

    top: 40px;

    left: 0;

    height:200px;

    -webkit-transform: rotate(0deg);

    -webkit-transition: left 1slinear,-webkit-transform 1s linear;

    -moz-transform: rotate(0deg);

    -moz-transition: left 1slinear,-moz-transform 1s linear;

    -o-transform: rotate(0deg);

    -o-transition: left 1slinear,-o-transform 1s linear;

}

div:hover img {

    position: absolute;

    left: 500px;

    -webkit-transform: rotate(3000deg);

    -moz-transform: rotate(3000deg);

    -o-transform: rotate(3000deg);

}

</style>

</head>

 

<body>

<div> <img src="images/bg.jpg" alt="*" title=""/> </div>

</body>

</html>

相关文章

HTML5和CSS3实现3D展示商品信息的代码
HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
关于HTML5和CSS3实现机器猫的代码