css3旋转 | 易学教程

html + css3 demo

阅读更多关于 html + css3 demo

最近，在做一个比较大的网站，主要服务于欧美地区，全站为英文版本，因为是电子产品，因此，要展示产品内在美（扯个蛋！）仿照小米、錘子、苹果等网站，着重于css3动效效果，搜集整理了一些网站中用到的动效图，方便以后翻阅。所有页面的动效依照 anicollection 动效来实现旋转菜单所有图标使用了：font-awesome.min.css 所有图片的跨度调整显示跨度 40deg 为一个跨度，360/9 从第二个图标开始延迟上一个图标的2倍时间所有图标都在在上一个图标的基础上增加 40deg，目的是让图标都垂直居中显示代码效果： demo Tab 页内容：从右往左移显示的tab内容区的宽高使用 vw / vh；动画名称及动画效果实现，均以 class 命名；水平方向，由右向左移动，使用了 transform: translate3d(100%, 0, 0) -> transform: translate3d(0, 0, 0)，由100%移到了0%，圆点为 0，长度为100 通过控制 tab内容区 class 来实现平滑左移效果代码效果： demo 来源： http://www.cnblogs.com/baiyygynui/p/6917617.html

CSS3——2D变形和3D变形

阅读更多关于 CSS3——2D变形和3D变形

2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。变形转换 transform transform 变换变形的意思《 transformers 变形金刚》移动 translate(x, y) translate 移动平移的意思 translate(50px,50px); 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。可以改变元素的位置，x、y可为负值； translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） translateX(x)仅水平方向移动（X轴移动） translateY(Y)仅垂直方向移动（Y轴移动） .box { width: 499.9999px; height: 400px; background: pink; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); /* 走的自己的一半 */ } 让定位的盒子水平居中缩放 scale(x, y) transform:scale(0.8,1);

CSS3 3D变形效果

阅读更多关于 CSS3 3D变形效果

CSS3 3D变形效果 CSS3 transform3D变形 transform的含义是：改变，使…变形；转换三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数： 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数； 3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数； 3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数； transform:translate()：含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。 HTML代码如下： <div class="demo_transform1"></div> css代码如下： .demo_transform1{ width:300px; height:200px; background:#00f; margin:50px auto; -webkit-transform:translate(120px,0); -moz-transform:translate(120px,0px)； } transform

CSS3 Transform变形（3D转换）

阅读更多关于 CSS3 Transform变形（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 中的2D转换

阅读更多关于 css3 中的2D转换

一、CSS3转换通过转换实现对对元素进行旋转、缩放、移动、拉伸的效果；这种原来必须要通过JS或者图片处理才可以实现的效果，现在都可以通过CSS3来完成。 2D转换采用 transform 属性来实现效果。二、transform属性的取值 rotate() 函数是可以进行旋转的函数 scale() 函数可以进行缩放的函数三、函数的用法 transform:rotate( deg);旋转将 transform 属性的取值设置为 rotate函数，在括号里的是旋转的角度，其单位是 deg （ degree 程度），所需要设置角度的值可以是正值，也可以是负值。正值按照顺时针进行旋转（向左）；负值按照逆时针进行旋转（向右）在我们编辑代码的时候可以使用 trsf 扩展前缀也会随之被扩展出来（随机，输入trsf不一定出现的是transform:rotate()属性值）实例一：构建一个div盒子，实现鼠标悬停时盒子顺时针旋转 30deg 的效果。（如果我们将角度设置为负值，则会向左侧倾斜） 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2D转换</title> 6 <style> 7 body{ 8 position: relative; 9

CSS3 2D转换

阅读更多关于 CSS3 2D转换

2D转换方法分为以下5种： 1.位移 translate() 2.旋转 rotate() 3.缩放 rotate() 4.倾斜 skew () 5.矩阵 matrix() 1.translate(50px, 100px)，根据给定的参数，从当前位置进行移动（x轴移动距离，y轴移动距离） div{ 　　transform: translate(50px,100px); 　　-ms-transform: translate(50px,100px); /* IE 9 */ 　　-webkit-transform: translate(50px,100px); /* Safari and Chrome */ } 2.rorate(30deg); 顺时针旋转指定的度数，如果参数为负，代表逆时针旋转 div{ transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ } 3.scale(2,3); 宽(x轴)和高(y轴)变为指定倍数 div{ -ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */

css3之3D 旋转立方体与哆啦A梦

阅读更多关于 css3之3D 旋转立方体与哆啦A梦

主要记录两个css3 3D转换的示例㈠哆啦A梦三个哆啦A梦的图片，分别让其围绕X轴，Y轴，Z轴旋转60度，鼠标放上开始发生变化。具体代码如下图所示： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3d变换</title> 6 <style type="text/css"> 7 #stage{ 8 width: 910px; 9 margin:100px auto; 10 perspective:100px; 11 } 12 .box{ 13 width:300px; 14 height: 327px; 15 float: left; 16 transition:linear 1s; 17 transition-style:preserve-d; 18 } 19 img{ 20 width:300px; 21 height: 327px; 22 } 23 .x:hover{ 24 transform:rotateX(60deg); 25 } 26 .y:hover{ 27 transform:rotateY(60deg); 28 } 29 .z:hover{ 30 transform:rotateZ(60deg); 31 } 32 </style> 33 <

CSS3 3D转换

阅读更多关于 CSS3 3D转换

CSS3 允许使用 3D 转换来对元素进行格式化。㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换。 Chrome 和 Safari 需要前缀 -webkit-。 Opera 仍然不支持 3D 转换（它只支持 2D 转换）。㈡rotateX() 方法通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。 1 代码如下所示： 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <style> 6 div 7 { 8 width:220px; 9 height:200px; 10 background-color:yellow; 11 border:1px solid black; 12 } 13 div#div2 14 { 15 transform:rotateX(60deg); 16 -webkit-transform:rotateX(60deg); /* Safari and Chrome */ 17 -moz-transform:rotateX(60deg); /* Firefox */ 18 } 19 </style> 20 </head> 21 <body> 22 23 <div>初始状态</div> 24 25 <div id="div2">围绕x轴旋转120度</div> 26

CSS3 元素转圈动画（元素旋转动画）

阅读更多关于 CSS3 元素转圈动画（元素旋转动画）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 转圈</title> <style> .turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定义的动画名称 1s : 动画时间 linear : 动画以何种运行轨迹完成一个周期 infinite :规定动画应该无限次播放 */ @keyframes turn{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform

扇形导航 css3

阅读更多关于扇形导航 css3

本篇文章将通过对css3中的2d变化以及过渡进行分析设计先放上最终效果图功能实现： 1.给扇形home元素设置点击事件并添加2d旋转　　　　　2.给导航栏设置2d旋转并通过三角函数计算出各个导航位置　　　　　3.设置导航单击事件并添加过渡结束事件transitonend 完成点击放大并恢复的动画注　　意： transitonend事件需要及时移除假如没有内部自杀则这个事件一直伴随着点击时间存在则会导致其进行其他过渡时仍会触发导致下图变化在过渡结束后存在多余操作　　　　　　　　　　　　　　　　　正确示意应是内容清晰无多余操作 css部分代码 *{ padding: 0; margin: 0; } body,html{ height: 100%; overflow: hidden; } #wrap{ position: absolute; bottom: 8px; right: 8px; width:50px ; height: 50px; /* background: pink; */ } #wrap > #content>img{ position: absolute; left: 0; top: 0; margin: 4px; border-radius:50% ; } #wrap > #content{ height: 100%; } #wrap

订阅 css3旋转