Chinaunix首页 | 论坛 | 博客
  • 博客访问: 574600
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: HTML5

2016-09-20 14:27:08



代码如下:

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3.     <title>
  4.         css特效
  5.     </title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         li{
  12.             list-style: none;
  13.         }
  14.         body{
  15.             background-image: url("images/bodyBg.jpg");
  16.         }
  17.         #nav{
  18.             width:980px;
  19.             height:350px;
  20.             margin:100px auto;
  21.         }
  22.         #nav ul li{
  23.         
  24.         background:rgba(0,0,0,.5);
  25.         height:105px;
  26.         width:180px;
  27.         float:left;
  28.         margin:30px 5px;
  29.         position:relative;
  30.         }
  31.         #nav ul li:before{
  32.         content:"";
  33.         height:105px;
  34.         width:180px;
  35.         background:rgba(0,0,0,.5);
  36.         position:absolute;
  37.         top:0px;
  38.         left:0px;
  39.         transform:rotate(60deg);
  40.         -webkit-transform:rotate(60deg);
  41.         -moz-transform:rotate(60deg);
  42.         }
  43. #nav ul li:after{
  44.     content:"";
  45.     height:105px;
  46.     width:180px;
  47.     background:rgba(0,0,0,.5);
  48.     position:absolute;
  49.     top:0px;
  50.     left:0px;
  51.     z-index:1;
  52.     transform:rotate(-60deg);
  53.     -webkit-transform:rotate(-60deg);
  54.     -moz-transform:rotate(-60deg);
  55. }
  56. #nav ul li.mar{margin-left:100px;}
  57. #nav ul li img{
  58.     top:0px;
  59.     left:0px;
  60.     right:0px;
  61.     bottom:0px;
  62.     margin:auto;
  63.     z-index:2;
  64.     position:absolute;
  65.     transition:1s;
  66.     -webkit-transition:1s;
  67.     -moz-transition:1s;
  68. }
  69. #nav ul li img:hover{
  70.     -webkit-transform:rotate(360deg) scale(1.5);
  71.     -moz-transform:rotate(360deg) scale(1.5);
  72.     -ms-transform:rotate(360deg) scale(1.5);
  73.     -o-transform:rotate(360deg) scale(1.5);
  74.     </style>
  75. </head>
  76. <body>
  77.     <div id="nav">

  78. <ul>
  79.         <li><img src="images/1.png"/></li>
  80.         <li><img src="images/2.png"/></li>
  81.         <li><img src="images/3.png"/></li>
  82.         <li><img src="images/4.png"/></li>
  83.         <li><img src="images/5.png"/></li>
  84.         <li class="mar"><img src="images/1.png"/></li>
  85.         <li><img src="images/7.png"/></li>
  86.         <li><img src="images/8.png"/></li>
  87.         <li><img src="images/9.png"/></li>
  88.         <li><img src="images/10.png"/></li>
  89.         <li><img src="images/11.png"/></li>
  90.         <li><img src="images/12.png"/></li>
  91.         <li><img src="images/13.png"/></li>
  92.         <li><img src="images/14.png"/></li>
  93.     </ul>
  94.     </div>
  95. </body>
  96. </html>

rotate() 方法旋转画布的坐标系统。

rotate() 方法通过指定一个角度,改变了画布坐标和 Web 浏览器中的 元素的像素之间的映射,使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 元素本身。注意,这个角度是用弧度指定的。

CSS transform中的rotate的旋转中心怎么设置?

默认情况,变形的原点在元素的中心点,或者是元素X轴和Y轴的50%处。
我们没有使用transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作,我们就可以使用transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
如果我们把元素变换原点(transform-origin)设置0(x) 0(y),这个时候元素的变换原点转换到元素的左顶角处。
改变transform-origin属性的X轴和Y轴的值就可以重置元素变形原点位置,其基本语法如下所示:
`transform-origin:[ | | left | center | right | top | bottom] | [ | | left | center | right] | [[ | | left | center | right] && [ | | top | center | bottom]] ?`

transform-origin属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。

2D的变形中的transform-origin属性可以是一个参数值,也可以是两个参数值。如果是两个参数值时,第一值设置水平方向X轴的位置,第二个值是用来设置垂直方向Y轴的位置。

3D的变形中的transform-origin属性还包括了Z轴的第三个值。其各个值的取值简单说明如下:

  • x-offset:用来设置transform-origin水平方向X轴的偏移量,可以使用值,同时也可以是正值(从中心点沿水平方向X轴向右偏移量),也可以是负值(从中心点沿水平方向X轴向左偏移量)。
  • offset-keyword:是top、right、bottom、left或center中的一个关键词,可以用来设置transform-origin的偏移量。
  • y-offset:用来设置transform-origin属性在垂直方向Y轴的偏移量,可以使用值,同时可以是正值(从中心点沿垂直方向Y轴向下的偏移量),也可以是负值(从中心点沿垂直方向Y轴向上的偏移量)。
  • x-offset-keyword:是left、right或center中的一个关键词,可以用来设置transform-origin属性值在水平X轴的偏移量。
  • y-offset-keyword:是top、bottom或center中的一个关键词,可以用来设置transform-origin属性值在垂直方向Y轴的偏移量。
  • z-offset:用来设置3D变形中transform-origin远离用户眼睛视点的距离,默认值z=0,其取值可以,不过在这里将无效。

看上去transform-origin取值与background-position取值类似。为了方便记忆,可以把关键词和百分比值对比起来记:

  • top = top center = center top = 50% 0
  • right = right center = center right = 100%或(100% 50%)
  • bottom = bottom center = center bottom = 50% 100%
  • left = left center = center left = 0或(0 50%)
  • center = center center = 50%或(50% 50%)
  • top left = left top = 0 0
  • right top = top right = 100% 0
  • bottom right = right bottom = 100% 100%
  • bottom left = left bottom = 0 100%

css3动画属性系列之transform scale缩放

scale(x,y) 对元素进行缩放
  • X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
  • Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准

scaleX() 元素只在X轴(水平方向)缩放元素。

  • 默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点
scaleX() 元素只在X轴(水平方向)缩放元素。

  • 默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点
scaleY() 元素只在Y轴(垂直方向)缩放元素。

  • 基点一样在元素的中心位置。可以通过transform-origin来改变基点。
兼容行的写法:


点击(此处)折叠或打开

  1. .test{
  2.       -moz-transform:scale(2,2);
  3.       -webkit-transform:scale(2,2);
  4.       -o-transform:scale(2,2);
  5.       background:url(img/i.png) no-repeat;
  6.       width:198px;
  7.       height:133px;
  8.     }

阅读(494) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册