css3旋转 | 易学教程

CSS3实现一个旋转的花朵

阅读更多关于 CSS3实现一个旋转的花朵

要效果图如下：实现原理：其实很简单，就是中间的圆圈定位在中间，其他的6个圆圈，进行不同的绝对定位，然后进行旋转！代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现的旋转的花朵</title> <style> *{ margin: 0; padding: 0; } *,*:before,*:after{ box-sizing: border-box; } html body{ height: 100%; } .container { background: #f39c12; height: 300px; position: relative; } .loader{ position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .loader .spinnerBlock{ -webkit-animation: rotate 1000ms linear infinite; animation: rotate 1000ms linear infinite; -webkit-transform-origin:

---CSS3绘制8种超炫的加载动画

阅读更多关于 ---CSS3绘制8种超炫的加载动画

CSS3绘制8种超炫的加载动画逛前端开发网站的时候，偶尔发现一组非常炫酷的CSS3加载动画，遂迫不及待的做个Demo保存下来。这些加载动画用到了CSS3的旋转transform属性，颜色透明度设置和伪元素操作等CSS技术。奇妙的组合，产生了意想不到的效果。 1.上下起伏波动的加载动画： #loader1, #loader1:before, #loader1:after { background: #f2fa08; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } #loader1:before, #loader1:after { position: absolute; top: 0; content: ''; } #loader1:before { left: -1.5em; } #loader1 { text-indent: -9999em; margin: 50px 50px; position: relative; float: left; font-size: 11px; -webkit-animation-delay: 0.16s; animation-delay: 0.16s; }

CSS3 transition实现超酷动画效果

阅读更多关于 CSS3 transition实现超酷动画效果

一、前面的感慨以前也陆陆续续试过CSS3的一些特性，文字投影，多边框等。但都是试试而已，知道有这么回事。今天，见到了一个新玩意，transition，认认真真的试了一下，经过，我懵了，我呆了，我傻了，半天说不出话来，这…这…unbelievable，amazing，太神奇了，太不可思议了，几行简单的CSS，如此炫酷的动画效果，flash都不及的动画效果，我真是难以表达我的心情。下面由浅入深，使用纯CSS，一步一步实现图片墙动画效果。这里，必须要先说明一下：对于对于此transition效果，IE6,IE7,IE8浏览器可以回家过元旦节了，这里没有它们的事情，Firefox3虽然平时表现不错，这里也没有它的事情。这个效果最拿手的是chrome2浏览器，Safari4，也就是webkit家族，这里Firefox3.5勉强凑合，有盒阴影和旋转效果，但是没有动画。所以，下文陆续提供的demo页面仅适用于chrome浏览器和Safari浏览器，部分适用于Firefox3.5+，IE纯粹的观众。二、基础练习 – 实现旋转与盒投影效果在CSS3中，实现旋转效果需要用到transform属性中的rotate属性；实现盒阴影效果需要使用box-shadow属性。具体参见下面的示例代码。 -webkit-transform:rotate(10deg); -moz-transform

CSS3 Transitions, Transforms和Animation使用简介与应用展示

阅读更多关于 CSS3 Transitions, Transforms和Animation使用简介与应用展示

一、前言兼目录索引《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范，各类清规戒律谨记与严守。但是，后来呢，花姑娘送到跟前，什么戒律都成了浮云，禁不住诱惑享乐去了。啊，我现在似乎有类似的感觉，本来不打算深究CSS3的一些属性的，但是其效果以及实际应用价值之诱惑实在巨大，还是抵挡不住，折腾下了这篇文章。劳民伤财的工程越少越好，所以，这里干脆把CSS3 动画相关的几个属性凑合到一起了，这样，至少一年半载内不会再写相关的文章了。 CSS3动画相关的几个属性是：transition, transform, animation；我分别理解为过渡，变换，动画。虽意义相近，但具体角色不一。就像是SHE组合，虽然都是三个女生，都唱同一首歌，但有负责高音，和擅长低音的，具体工作于角色还是有差异的。//zxx:貌似那个谁谁烧伤了，真是不幸~~ transition指过渡啦，就是从a点都b点，就像过江坐渡轮，是有时间的，是连续的，一般针对常规CSS属性；transform指变换，就那几个固定的属性：旋转啦，缩放啦，偏移啦什么的，与独立于远房亲戚transition使用，但是，效果就是很干涩机械的旋转移动。要是配合transition属性，旋转啊什么的，就会很平滑。animation最先安家于Safari浏览器，自成一家，与transition和transform有老死不相往来之感

CSS3过渡效果

阅读更多关于 CSS3过渡效果

先记住几个属性 transform:translate(x,y);//平移,x代表向又移动距离，y代表向下移动距离 transform:scale(x,y);//缩放，x代表水平缩放倍数，y代表垂直缩放倍数 transform:rotate(x);//旋转，x代表顺时针旋转多少度，如rotate(10deg) transform:skew(x,y);//倾斜，x\y分别代表沿x轴和y轴的倾斜动画过渡 transition-property列出元素应该过渡的CSS属性，可过度属性包括背景、边框和方框模型属性。 transition-duration设置过渡持续时间 transition-timing-function设置过渡的速度，可用ease、linear、ease-in、ease-out或ease-in-out之一 transition-delay动画延时时间缩写形式 #selector{transition:transform 0.2s ease} 值的顺序必须为以下顺序： transition-property transition-duration transition-function transition-delay 来源： oschina 链接： https://my.oschina.net/u/1417422/blog/616733

CSS3复习之动画

阅读更多关于 CSS3复习之动画

在前端的开发过程中,一般在写CSS的时候,会需要使用到css的动画知识,本文主要是实现一个简单的魔方来对动画和3D进行一个复习: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; margin:0; padding:0; } .box { width: 400px; height: 400px; margin: 200px auto; position: relative; font-size: 50px; /*perspective: 1000px;*/ transform-style: preserve-3d; animation: rotate 10s linear infinite alternate; } .box div { width: 400px; height: 400px; position: absolute; } .right { background-color: transparent; transform: rotateY(90deg) translateZ(200px); } .left { background-color: transparent; transform:

用CSS3实现钟表效果

阅读更多关于用CSS3实现钟表效果

背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。效果图实现过程 1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置，用 border-radius 属性将其设置成圆形。 <div id="wrap"></div> #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border- radius:50%; position:relative;} 2.接下来我们用ul和li来写表盘中的刻度，对其进行简单的样式设置。其中需要注意的是，我们用 -webkit-transform-origin:center 100px; 来设置我们的旋转基点。然后利用 -webkit-transform: rotate(0); 让我们的li旋转相应的角度形成相应的刻度。 <ul id="list"> <li></li>  <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> #wrap ul{margin:0; padding:0; height:200px; position:relative

深入CSS3 动画效果的总结详解

阅读更多关于深入CSS3 动画效果的总结详解

CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、transition以及animation。 transform rotate 设置元素顺时针旋转的角度，用法是： transform: rotate(x); 参数x必须是以deg结尾的角度数或0，可为负数表示反向。 scale 设置元素放大或缩小的倍数，用法包括： transform: scale(a); 元素x和y方向均缩放a倍 transform: scale(a, b); 元素x方向缩放a倍，y方向缩放b倍 transform: scaleX(a); 元素x方向缩放a倍，y方向不变 transform: scaleY(b); 元素y方向缩放b倍，x方向不变 translate 设置元素的位移，用法为： transform: translate(a, b); 元素x方向位移a，y方向位移b transform: translateX(a); 元素x方向位移a，y方向不变 transform: translateY(b); 元素y方向位移b，x方向不变 skew 设置元素倾斜的角度，用法包括： transform: skew(a, b); 元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度b transform:

CSS3 时钟效果实现

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

效果图：知识点： 1、transform-origin 2、弧度计算公式 (2*Math.PI/360)*角度 3、表盘数字计算方法 x=r(1+Math.cos(弧度))； y=r(1+math.sin(弧度))；完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*all tip*/ *{ padding:0; margin: 0; } ol,ul{ list-style: none; } .clock{ width:200px; height:200px; margin: 50px auto; background: #292a38; border-radius:50%; position: relative; } /*表盘数字*/ .clocknum{ position: relative; width:150px; height: 150px; top:50%; left:50%; transform: translate(-50%,-50%); } .clocknum li{ position: absolute; top:50%; left:50%; font-size:15px; transform:

css3 transform做动画

阅读更多关于 css3 transform做动画

css3 transform做动画第一种用关键帧这里就不说了就说第二种方法用 transition属性 ps:1jquery anim不支持transform动画但css还是支。 2 css3关键帧就是不能动态修改关键帧属性所以采用这个。 <pre> <img class="p1_wz1"src="{$yuming}/images/1/p1_wz1.jpg" /> .p1_wz1{ width: 2.3rem; position: absolute; left: 41.6%; top: 4.2rem; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } </pre> 然后运行下如下代码 <pre> $(".p1_wz1").css({"-webkit-transform":"rotate(260deg)"}); </pre> 马上就旋转了起来进度条可以参考这个方法来做来源： https://www.cnblogs.com/newmiracle/p/11864385.html

订阅 css3旋转