css3旋转

转换是使元素改变形状、尺寸和位置的一种效果，对元素进行移动、缩放、转动、拉长或拉伸。 属性：transform 2D转换属性值 translate() // x,y位置移动 rotate() // 顺时针旋转角度 scale() // x,y元素尺寸增加或减少 skew() // x,y元素翻转给定的角度 1） ）translate() 通过 translate() 方法，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数，元素从其当前位置移动。 例如： div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ } 值translate(50px,100px)把元素从左侧向右移动50px，从顶端向下移动100px。 2） ）rotate() 通过rotate()方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

Transition:过渡 1>过渡属性： transition-property 要运动的样式 （all || [attr] || none） transition-duration 运动时间 transition-delay 延迟时间 transition-timing-function 运动形式 ease：（逐渐变慢）默认值 linear：（匀速） ease-in：(加速) ease-out：（减速） ease-in-out：（先加速后减速） cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） 动画工具网址：http://matthewlein.com/ceaser/ 过渡属性应用实例： 　　 <style> 　　　　div{width:100px;height:100px;background:blue;transition:1s;} //参数一：过渡时间为1秒，鼠标划过一1秒内div原样式发生改变(过渡时间，可以是秒-s，或者是毫秒ms) 　　　　div{width:100px;height:100px;background:blue;transition:1s 2s;} //参数二：延迟2秒，执行过渡1秒的效果(延迟时间) 　　　　div{width:100px;height:100px;background:blue;transition:1s

Css3中的过渡属性：transition 　　　　注意事项: 　　　　　　　　1:时间要加单位 　　　　过度属性： 　　　　　　　　1：属性名称 transition-prorperty 　　　　　　　　2：时间：transition-duration 　　　　　　　　3：速度：traisition-timing-function 　　　　　　　　4：延迟：transition-delay C3里面的属性简写类似于background的简写 animation：动画 添加动画要写@keyframe前缀 　　　　动画属性： 　　　　　　　　动画名称 用于@keyframes anmiation-动画名称 　　　　　　　　动画完成的周期：animation-duration 　　　　　　　　规定动画的速度曲线：animation-timing-function 　　　　　　　　规定当动画不播放时，要应用到元素的样式：animation-fill-mode 　　　　　　　　规定动画何时开始：animation-delay 　　　　　　　　规定动画播放的次数：animation-iteration-count 　　　　　　　　规定动画是否在下一周期逆向的播放：animation-direcition 　　　　　　　　规定动画是否正在运行或暂停：animation-play-state

css3中添加了很多新的标签 属性 描述 css transform 向元素应用 2D 或 3D 转换。 3 transform-origin 允许你改变被转换元素的位置。 3 transform-style 规定被嵌套元素如何在 3D 空间中显示。 3 perspective 规定 3D 元素的透视效果。 3 perspective-origin 规定 3D 元素的底部位置。 3 backface-visibility 定义元素在不面对屏幕时是否可见。 3 可以通过这些属性来对一个平面图形操作达到一个立体的效果 函数 描述 matrix3d( n , n , n , n , n , n , n , n , n , n , n , n , n , n , n , n ) 定义 3D 转换，使用 16 个值的 4x4 矩阵 translate3d( x , y , z ) 定义 3D 转化 translateX( x ) 定义 3D 转化，仅使用用于 X 轴的值 translateY( y ) 定义 3D 转化，仅使用用于 Y 轴的值 translateZ( z ) 定义 3D 转化，仅使用用于 Z 轴的值 scale3d( x , y , z ) 定义 3D 缩放转换 scaleX( x ) 定义 3D 缩放转换，通过给定一个 X 轴的值 scaleY( y ) 定义 3D

css3 2d/3d变换——实现超炫的特效 声明：所有结论都是经过实际代码运行的效果证实的，如果有不同的情况发生，请核对浏览器版本以及内核（360浏览器，webkit内核）是否与本人试验的时候一致，同时非常感觉读者阅读本文，如有错误之处，欢迎大家留言指出。 css3的2d/3d变换是一个很强大的功能，以前想要做到图片的倾斜或者旋转某个角度，都无法简单的做到，更别说3d效果的实现，这里的3d效果其实也是一种2d变换之后给人的一种视觉欺骗达到的，浏览器这个“平面”客户端确实无法做到真正的3d效果，现在css3就给我们提供了一种简单的方法来做到2d/3d效果。下面我给大家分享一下我的学习心得。 一、坐标轴和参考点（旋转基点） 1、参考点（旋转基点） 相信大家对于参考点这个概念并不会陌生，见名知意的一个词语，css的参考点就是元素所围绕其旋转的点，在css中用一个属性设置旋转基点，如下所示： transform-origin: left top; // 设置该元素的旋转基点为该元素的左上角 transform-origin 属性是css变换的一个重要的属性，一般需要设置2个值： 第一个值为偏移x轴方向的距离，可以用关键字left|right|center或者百分比以及具体的距离值描述。 第二个值为偏移y轴方向的距离，可以用关键字top|bottom

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 是什么

要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是先弄清楚3D的坐标系吧，从网上搜了一张经典坐标系图，供大家回顾一下。 1、3D试图 　 　transform-style：flat(默认，二维效果) / preserve-3d(三维效果)。设置一个元素的transform-style:preserve-3d； 只影响这个元素的子元素 (如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d)。这样所有子元素都可以相对与父元素的平面进行3d变形操作。和二维变形一样，三维变形可以使用transform属性来设置。可以通过制定的函数或者通过三维矩阵来对元素变型。列举几个函数： 　　translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px; 　　scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleY()。 　　rotateX(angle)

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>

　　最终效果如图一，gif图片稍微有点卡顿，事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单，分别是border-radius、伪元素、css3关键帧以及animation动画。 　　首先整理一下大概的思路：整个圆分为AB两部分，左右都是半圆，上面盖了一个背景色为白色的小圆，如右图，简单布局如下： 　　 <style> .loading{margin:100px auto; width: 8em; height: 8em; position: relative;} .loading .progress{position: absolute; width: 6em; height:6em; background-color: white; border-radius: 50%; left: 1em; top: 1em; line-height: 6em; text-align: center; } .left,.right{width: 4em;height: 8em;overflow: hidden; position: relative; float: left;} .left{ border-radius: 8em 0 0 8em;} .right{ border-radius: 0 8em 8em 0;} .left:after,.right:after

圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框 不废话直接 html界面（亲测的） ------转自百度经验 http://jingyan.baidu.com/article/e52e36154226ef40c70c5148.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3画图形</title> <style media="screen"> div{ text-align: center; display: inline-block; margin-left: 20px; } #circle {/*圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：*/ width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } /*设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：*/ #oval { width: 200px