transform

transform：转换 对元素进行移动、缩放、转动、拉长或拉伸。 方法：translate(): 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数 有两个div，它们的css样式如下： 1 .before { 2 width: 70px; 3 height: 70px; 4 background-color: #8fbc8f; 5 } 6 7 .after { 8 width: 70px; 9 height: 70px; 10 background-color: #ffe4c4; 11 -webkit-transform: translate(50px, 30px); 12 -moz-transform: translate(50px, 30px); 13 -ms-transform: translate(50px, 30px); 14 -o-transform: translate(50px, 30px); 15 transform: translate(50px, 30px); 16 } 结果如下： rotate() 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 有两个div，它们的css样式如下 1 .before { 2 width: 70px; 3 height: 70px; 4 background-color:

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

transform 转换，变形 origin 定义旋转基点（ left top center right bottom 坐标值） transform-origin: 50px 50px; transform-origin: left;。 rotate 旋转 transform:rotate(50deg) 旋转角度可以为负数，需要先定义origin。 skew 扭曲 transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。 scale 缩放 transform:scale(2,3) 横向放大2倍，纵向放大3倍；transform:scale(2) 横竖都放大2倍。 translate 移动 transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。 Transition 平滑过渡 transition-property： 变换的属性（ none(没有属性改变)、all(所有属性改变)、具体属性） transition-duration：变换持续时间 transition-timing-function： 变换的速率（ ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线））

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)

关于safari 浏览器 input圆角的解决方案 去除iOS safari 浏览器的input的圆角问题 -webkit-appearance: none; border 阴影 .shadow--2dp{ box-shadow:0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); } .shadow--2dp { box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) } .shadow--3dp { box-shadow: 0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12) } .shadow--4dp { box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2) } .shadow--6dp { box-shadow: 0 6px 10px 0 rgba(0,0