css3旋转 | 易学教程

css3实现时钟效果

阅读更多关于 css3实现时钟效果

css3实现时钟效果 <div class="clock"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> <div class="line line6"></div> <div class="cover"></div> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="center"></div> </div> * { padding : 0 ; margin : 0 ; } .clock { width : 300px ; height : 300px ; border : 10px solid #ccc ; /*border-radius: 160px;*/ /*百分比参照元素的实际宽高*/ border-radius : 50% ; margin : 100px auto ; position : relative ; } .line { width : 8px ; height :

手把手教你玩转 CSS3 3D 技术

阅读更多关于手把手教你玩转 CSS3 3D 技术

css3的3d起步要玩转css3的3d，就必须了解几个词汇，便是透视( perspective )、旋转( rotate )和移动( translate )。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。平移同理。当然用理论来说明，估计你还不明白。下面是3个gif：沿着X轴旋转沿着Y轴旋转沿着Z轴旋转旋转应该没问题了，那理解平移起来就比较容易了，就是在在X轴、Y轴、z轴移动。你可能会说透视比较不好理解，下面我介绍一下透视的几个属性。 perspective perspective 英文名便是透视，没有这东西就没办法形成3D效果，但是这个东西是怎么让我们浏览器形成3D 效果的呢，可以看下面这张图，其实学过绘画的应该知道透视关系，而这里就是这个道理。但是在css里它是有数值的，例如 perspective: 1000px 这个代表什么呢？我们可以这样理解，如果我们直接眼睛靠着物体看，物体就超大占满我们的视线，我们离它距离越来越大，它在变小，立体感也就出来了是不是，其实这个数值构造了一个我们眼睛离屏幕的距离，也就构造了一个虚拟3D假象。 perspective-origin 由上面我们了解了 perspective ，而加上了这个 origin 是什么

CSS3 3D转换效果

阅读更多关于 CSS3 3D转换效果

CSS3 3D 转换三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数： 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数； 3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数； 3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数； 3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。 1.3D位移在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。随着px的增加，直观效果上： X：从左向右移动 Y：从上向下移动 Z：以方框中心为原点，变大从上图的效果可以看出，当z轴值越大时，元素也离观看者更近，从视觉上元素就变得更大；反之其值越小时，元素也离观看者更远，从视觉上元素就变得更小。例子： height: 300px; float: left; margin: 15px; position: relative;

CSS3(3)---2D变形(transform)

阅读更多关于 CSS3(3)---2D变形(transform)

原文: CSS3(3)---2D变形(transform) CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一，它常用的属性有: 移动 (translate)、缩放 (scale)、旋转 (rotate)、倾斜 (skew)。一、2D变形语法 1、移动 (translate) 移动的属性: translate translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） translateX(x)仅水平方向移动（X轴移动） translateY(Y)仅垂直方向移动（Y轴移动）比如设置为: transform: translate(50px,60px); /* 水平向右移动50px 和垂直向下移动60px*/ 运行结果说明从上面运行结果可以看出两点 1、移动的原点默认是最左角上的位置。 2、px取正数代表向右或者向下。Px为负值,那就变成向左或者向上。 2、缩放 (scale) 缩放的属性: scale scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） scaleX(x)元素仅水平方向缩放（X轴缩放） scaleY(y)元素仅垂直方向缩放（Y轴缩放）说明 scale默认值为1,设置0.5代表缩小一倍,2代表放大一倍。比如设置为: transform:

css3 perspective与translateZ变换

阅读更多关于 css3 perspective与translateZ变换

css3中的坐标系，rotateX就是绕着x轴旋转，rotateY就是绕着Y轴旋转，rotateZ就是绕着z轴旋转（也就是xy平面的旋转）。 perspective属性用来设置视点，在css3的模型中，视点是在Z轴所在方向上的。 translateX,translateY表现出在屏幕中的上下左右移动，transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。（200-transformZ的值）就是视点和xy平面的距离（初始是屏幕的位置，此时transformZ的值为0）。需要注意的一点是，整个坐标系中各各坐标轴的相对关系是固定的。正常情况下，视点和我们的眼睛是同一个方向的如同上面所讲。而当执行如rotateX(90deg)等旋转变换时，zy平面旋转，z轴和y轴的指向也会变化90度。此时z轴指向上方，视点也是在上方，此时我们从屏幕上看的就不是直观的元素大小变化，而是元素的升降变化，好像站在远处在看一部电梯或者你把书本平放举过头顶或下放那样。 <!DOCTYPE html> <html>

jquery版时钟（css3实现）

阅读更多关于 jquery版时钟（css3实现）

原文: jquery版时钟（css3实现）　　做时钟的主要原因是因为喜欢，觉得它好看（本人对特效有点爱不释手……）。做的时候感觉工程量会有点大，做着做着发现实现起来其实并不难，只要理清思绪，其实还蛮简单的（我制作东西喜欢整体方向制定好，然后边做边找感觉，最后可能会有不一样的惊喜）。　　我这里采用了时钟的背景图片，第一我觉得图片好看，第二我觉得应该先实现主要的功能再考虑画图（总归来说就是有点懒，哈哈~）。好了，废话不多说啦，进入正题。　　一、图片演示　　　　二、html代码 <div class="box"> <div class="clock">  <div class="second-hand"></div>  <div class="minute-hand"></div>  <div class="hour-hand"></div>  </div> </div> 　　三、css代码 .box {margin: 10px auto; width: 894px; height: 863px;} .clock {position: relative; width: 894px; height: 863px; background: url("images/bg.png")

jquery版时钟（css3实现）

阅读更多关于 jquery版时钟（css3实现）

做时钟的主要原因是因为喜欢，觉得它好看（本人对特效有点爱不释手……）。做的时候感觉工程量会有点大，做着做着发现实现起来其实并不难，只要理清思绪，其实还蛮简单的（我制作东西喜欢整体方向制定好，然后边做边找感觉，最后可能会有不一样的惊喜）。　　我这里采用了时钟的背景图片，第一我觉得图片好看，第二我觉得应该先实现主要的功能再考虑画图（总归来说就是有点懒，哈哈~）。好了，废话不多说啦，进入正题。　　一、图片演示　　　　二、html代码 <div class="box"> <div class="clock">  <div class="second-hand"></div>  <div class="minute-hand"></div>  <div class="hour-hand"></div>  </div> </div> 　　三、css代码 .box {margin: 10px auto; width: 894px; height: 863px;} .clock {position: relative; width: 894px; height: 863px; background: url("images/bg.png") no-repeat;} .second

css3学习系列之移动

阅读更多关于 css3学习系列之移动

transform功能放缩使用sacle方法实现文字或图像的放缩处理，在参数中指定缩放倍率，比如sacle(0.5)表示缩小50%，例子如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scale方法使用示例</title> <style> div { width: 300px; margin: 150px auto; background-color: yellow; text-align: center; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); } </style> </head> <body> <div>示例文字</div> </body> </html> 另外，可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率，例子如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scale方法使用示例</title> <style> div { width: 300px; margin: 150px auto; background-color: yellow

CSS3样式中新添加的属性

阅读更多关于 CSS3样式中新添加的属性

border-radius：允许向元素添加圆角 <style type="text/css"> #r1{ border-radius:25px; background:blue; padding:20px; width:200px; height:150px; } #r2{ border-radius:25px; border:2px solid green; padding:20px; width:200px; height:150px; } #r3{ border-radius:25px; background:url("img/1.jpg"); background-position:left top; background-repeat:repeat; padding:20px; width:200px; height:150px; } </style> </head> <body> <form action="" id="myform" > <p>border-radius </p> <p>指定背景颜色圆角</p> <p id="r1">圆角</p> <p>指定边框元素圆角</p> <p id="r2">圆角</p> <p>指定背景图片圆角</p> <p id="r3">圆角</p> </form> </body> box-shadow：阴影 <style type=

CSS3新增的属性有哪些：

阅读更多关于 CSS3新增的属性有哪些：

徐先森讲web CSS3新增的属性有哪些： CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 CSS3新增了很多的属性，下面一起来分析一下新增的一些属性：　　1.CSS3边框： border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid; box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888; border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round; 　　2.CSS3背景： background-size：属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 background-origin

订阅 css3旋转