css3旋转

CSS3制作立方体

由 ∥☆過路亽．° 提交于 2020-02-22 17:08:27
用到的属性 hover 作用：当鼠标移入时产生定义的hover样式 使用方法：例：div标签 div:hover{样式} transform 作用：对元素进行移动、旋转、缩放、倾斜 值 描述 translate(x,y) 2D 移动 (单位px) translate3d(x,y,z) 3D 移动 translateX(x) X轴移动 translateY(y) Y轴移动 scale(x) 2D 缩放 scale3d(x,y,z) 3D 缩放 scaleX(x) 沿X轴缩放 scaleY(y) 沿Y轴缩放 scaleZ(z) 沿Z轴缩放 rotate(angle) 2D 旋转 (单位deg) rotate3d(x,y,z,angle) 3D 旋转 rotateX(angle) 沿X轴旋转 rotateY(angle) 沿Y轴旋转 rotateZ(angle) 沿Z轴旋转 skew(x-angle,y-angle) 沿着 X 和 Y 轴的 2D 倾斜 (单位deg) skewX(angle) 沿着 X 轴的 2D 倾斜 skewX(angle) 沿着 Y 轴的 2D 倾斜 注：skew没有3D效果 transition 值 描述 transition-property 指定CSS属性的name，transition效果 transition-duration

CSS3中translate、transform和translation的区别和联系

由 有些话、适合烂在心里 提交于 2020-02-13 17:19:41
translate :移动，transform的一个方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数： 用法transform: translate(50px, 100px); -ms-transform: translate(50px,100px); -webkit-transform: translate(50px,100px); -o-transform: translate(50px,100px); -moz-transform: translate(50px,100px); transform :变形。改变 CSS3中主要包括 旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg) 扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg) 缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4) 移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离 所有的2D转换方法组合在一起： matrix() 旋转、缩放、移动以及倾斜元素 matrix(scale.x , , scale.y , translate.x,

css3动画2D、3D转换

由 亡梦爱人 提交于 2020-02-13 12:06:38
css3动画的2D、3D转换代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3动画</title> <style type="text/css"> div{width:100px;height:100px;background: rebeccapurple;color:#fff;} .div1{ /*translate:移动(x,y)*/ transform:translate(100px,100px); -webkit-transform: translate(100px,100px);/*safari,chrome*/ -ms-transform: translate(100px,100px);/*IE*/ -o-transform:translate(100px,100px);/*opera*/ -moz-transform: translate(100px,100px);/*firefox*/ } .div2{ /*rotate:旋转(旋转角度edg)*/ transform:rotate(100deg); -webkit-transform:rotate(100deg);/*safari,chrome*/ } .div3{ /*scale:缩放(宽，高)*/

css3新特性

由 人盡茶涼 提交于 2020-02-06 06:13:28
css3新特性： 1.css3重要模块： 1.1选择器 1.2盒模型 1.3背景和边框 1.4文字特效 1.5 2D/3D转换 1.6动画 1.7多列布局 1.8用户界面 css3可继承的属性： 字体：font，font-size，font-weight，font-family，font-style，font-variant， 颜色：color。 列表：list-style，list-style-type，list-style-position，list-style-image. 文字：letter-spacing，word-spacing，white-space，line-height，text-decoration，text-transform，text-indent，text-align。 所有元素可继承：visibility和cursor。 2.css3边框 2.1 border-radius//圆角 <div>border-radius</div> div{ border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:30px; border-radius:25px; -webkit-border-radius:25px; -ms-border-radius:25px; -o-border

CSS3学习

由 余生长醉 提交于 2020-02-06 02:32:03
1.CSS3边框 border-radius:创建圆角边框 border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ box-shadow:边框阴影，方向为x，y，z -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; border-image:边框图片，IE不支持 2.CSS3背景 background-size:规定背景图片的尺寸，宽、高 background:url(/i/bg_flower.gif); background-size:63px 100px; -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-repeat:no-repeat; background-origin 属性规定背景图片的定位区域。 背景图片可以放置于 content-box、padding-box 或 border-box 区域。 background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit

CSS3新特性

由 时光总嘲笑我的痴心妄想 提交于 2020-02-06 02:15:38
CSS3 边框： border-radius（倒圆角） box-shadow （盒子阴影） border-image （边界图片） CSS3 背景： background-size（属性规定背景图片的尺寸。） background-origin（属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域） CSS3 文本效果： text-shadow（可向文本应用阴影，可以设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色） word-wrap（word-wrap 属性允许您允许文本 强制文本进行换行 - 即使这意味着会对单词进行拆分） CSS3 字体： @font-face 在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。 如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)： <style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { 　　font-family:myFirstFont; } <

css3系列之详解perspective

由 ℡╲_俬逩灬. 提交于 2020-02-02 02:54:19
css3系列之详解perspective perspective 简单来说，就是设置这个属性后，那么，就可以模拟出像我们人看电脑上的显示的元素一样。比如说， perspective：800px 意思就是，我在离屏幕800px 的地方观看这个元素。(这个属性，要设置在父元素上面) (这个属性呢，有着很冷门的知识请认真看完呢) 先来看看， 加了perspective 和 没有加是什么区别， 第一个小方块，是有加的效果，能明显的看到空间感了有没有， 感觉他是真的像在旋转， 而第二个呢，像是在伸缩。 本章需要知道translateZ 是干嘛的，如果不懂什么是 translate Z请点击→ css3系列之transform详解translate 那么思考一个问题，transform：translateZ 呢，可以增加 Z轴的距离， 那么Z轴越大，是不是也就代表着，这个元素，离我们的距离越近？ 那么，你把一张图片，贴到你脸上，有什么效果？ 是不是非常大？有人可能会问，这两者之间有什么关系吗？ 肯定是有的，这个 perspective 配合 transform：translateZ 就有这种效果， 我们来看看。(先记着，我们设置了perspective：800px，那么来看看 Z到800px 有什么效果) 有没有发现，临近 800px 的时候， 图片突然变黑了， 然后到 800px 的时候，

CSS3动画旋转与滤镜

由 那年仲夏 提交于 2020-01-28 00:46:44
animation属性-动画 1.IE10,Firefox和Opera支持animation属性，Safari和Chrome用-webkit-animation替换。 2.animation有以下几个值。 值 作用 animation-name 规定Keyframe要调用的名称 animation-duration 动画完成所需时间(s或ms) animation-timing-function 动画执行的速度曲线 animation-delay 开启动画的延迟 animation-iteration-count 播放次数 animation-direction 是否轮流反向播放动画 3.动画执行速度曲线默认是ease，其是低速➡加速➡变慢三阶段完成动画，还有以下五组值。 值 作用 linear 全程速度相同 ease-in 全程慢➡快 ease-out 全程快➡慢 ease-in-out 全程慢➡快➡慢 cubic-bezier(n,n,n,n) 四个参数可设置0~1的数值 4.动画的播放次数默认是1，可通过animation-iteration-count设置指定次数或设置为infinite(无限播放)。 5.动画默认是正常播放的，可通过设置animation-direction:alternate来实现轮流反向播放。 6.示例：把一个div从0位置向下移动

CSS3:变换和动画

由 烂漫一生 提交于 2020-01-26 10:14:12
<html> <style> .container{ -webkit-perspective: 800; -webkit-perspective-origin: 50% 40%; } .img{width:200px; padding:20px;} .trans{ border:1px solid #333;height:100px;width: 200px;margin: 20px; float: left; } .trans_rotata{ -webkit-transform:rotate(7deg); } .trans_rotataX{ -webkit-transform:rotateX(60deg); } .trans_3d{ -webkit-transform:rotate3d(1,-1,0,60deg) } .opacity{ opacity: 0.2; } .trans_scale{ -webkit-transform:scale(1.1, 1.1); } .trans_scale3D{ -webkit-transform:scale3D(1.1, 1.1, 1.1); } .img:hover{ -webkit-transform:scale3D(1.1, 1.1, 1.1); } .trans_skew{ -webkit-transform:skew(30deg

css3 2d/3d变换重点属性详解

由 为君一笑 提交于 2020-01-25 03:38:54
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旋转