css3旋转 | 易学教程

一款基于css3的散子3D翻转特效

阅读更多关于一款基于css3的散子3D翻转特效

css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下： <body> <div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class="page" id="page2">..</div> <div class="page" id="page3">...</div> <div class="page" id="page4">....</div> <div class="page" id="page5">.....</div> <div class="page" id="page6">......</div> </div> </div> </body> 在body中定义一个叫做outer的div，它是最外层的div，用来提供一个3D场景，可以认为它是一个3D图形的展示平台，只有定义了这样一个div，才能够展示3D图形，此外定义一个class为group的div，用来盛放色子的六个平面，将它们组合在一起。最后再定义6个平行的div，表示色子的六个平面。第二步，定义三维场景的css,代码如下： #outer{ /*定义视距*/ -webkit-perspective

CSS3制作漂亮的照片墙

阅读更多关于 CSS3制作漂亮的照片墙

CSS3可以做动画大家肯定都是耳熟能详的了，但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢？那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧！第一部分：HTML 这里我们首先放十张图片在页面上面。（有什么靓照尽管上来哦！） <div class="content"> <img class="pic1" src="img/1.jpg" /> <img class="pic2" src="img/2.jpg" /> <img class="pic3" src="img/3.jpg" /> <img class="pic4" src="img/4.jpg" /> <img class="pic5" src="img/5.jpg" /> <img class="pic6" src="img/6.jpg" /> <img class="pic7" src="img/7.jpg" /> <img class="pic8" src="img/8.jpg" /> <img class="pic9" src="img/9.jpg" /> <img class="pic10" src="img/10.jpg" /> </div> 第二部分：CSS3 这一部分就是我们这节的重点了，如上图所示照片的位置各不相同，我们肯定会用到CSS3一下的知识点： CSS3的旋转

CSS3扑克旋转

阅读更多关于 CSS3扑克旋转

用css3写的一个小demo——鼠标移动带扑克牌，扑克牌旋转铺开！图片和代码在下边铺开的话有点小问题，感兴趣的可以自己改动一下附上源码及图片 <!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>旋转扑克</title> <style> *{ margin: 0; padding: 0; } div.box{ width: 120px; height: 165px; position: relative; margin: 100px auto; /* overflow: hidden; */ } div.box div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 bottom; transition: all .4s ease-in-out; background: url('img/timg.jpg')no-repeat;

CSS3翻转显示背面文字

阅读更多关于 CSS3翻转显示背面文字

CSS翻转显示背面文字常见于网页右边固定栏如下图。这里只是写了一个翻转效果。翻转效果会了像下图的网页固定栏自然也会写了实例代码如下： <!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> *{ margin: 0; padding: 0; } body{ /* perspactive表示视距——元素距离视图的距离像素越大离我们视野的距离就越远。可以做3D效果 */ perspective: 600px; } /* 最外层样式 */ /* 解决相邻外边距margin何必的问题*/ .box::before{ content: ''; display: table; } .box{ position: relative; width: 800px; height: 500px; box-shadow: 2px 2px 30px rgba(0, 0, 0, .5); /* 这个盒子水平居中

CSS3动效(Transitions、Transforms、Animation)

阅读更多关于 CSS3动效(Transitions、Transforms、Animation)

理解： transition 过渡连续的、从a到b transform 变换旋转、缩放、偏移 animation 动画一、transition 1.理解　　过渡，用于平滑的改变CSS值，举个例子： change{ 　　width:100px; 　　height:100px; 　　background:yellow; 　　transition:background 10s; } change:hover{ 　　background:red; } 　　意思就是说先在change这个css样式里面“声明”：如果我的background属性发生了变化，那么它的变化过程是连续变化（渐变），这个变化过程持续10s。　　所以，transition 就是用来定义，当一个变化发生时，它变化的连续性和时间，以及连续过程的快慢情况的（先慢后快、先快后慢等）。　　 transition不控制变化的产生，而是只控制变化发生后的过渡效果。 2.使用　　transition属性是下面几个属性的缩写: transition-property指定哪个属性应用过渡，比如 transition-property:background 就是指定 background 属性应用过渡。 transition-duration指定这个过渡的持续时间 transition-delay过渡延迟多长时间开始

web前端入门到实战：css3动画 Transition

阅读更多关于 web前端入门到实战：css3动画 Transition

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。 CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义 timing funtion ，比如匀速地或先快后慢)。可动画属性的列表是： -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all backdrop-filter background background-color background-position background-size border border

CSS3之transform属性-3D转换

阅读更多关于 CSS3之transform属性-3D转换

三维坐标系 x 轴：水平向右 – 注意：x轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：z轴往外是正值，往里是负值 3D旋转左手准则左手的手拇指指向旋转轴的正方向其余手指的弯曲方向就是该元素沿着该旋转轴旋转的方向（正值方向） transform: 作用：该属性可以将元素旋转、缩放、移动、倾斜等说明：应用于元素的 2D 或 3D 转换常用值： (none) ：定义不进行转换 (translate) ：定义2d位移，向右、向下为正值；向左、向上为负值 (translate3d) ：定义3d位移 (translateX) ：定义关于x轴的位移 (translateY) ：定义关于y轴的位移 (translateZ) ：定义关于z轴的位移 (rotate) ：定义2d旋转，顺时针为正值；逆时针为负值 (rotate3d) ：定义3d旋转 (rotateX) ：定义关于x轴的旋转 (rotateY) ：定义关于y轴的旋转 (rotateZ) ：定义关于z轴的旋转 (scale) ：定义2d缩放，0 - 1缩小，1 - +∞放大 (scale3d) ：定义3d缩放 (scaleX) ：定义关于x轴的缩放 (scaleY) ：定义关于y轴的缩放 (scaleZ) ：定义关于z轴的缩放 transform

CSS3中动画属性transform、transition和animation

阅读更多关于 CSS3中动画属性transform、transition和animation

Transform：变形　　在网页设计中， CSS 被习惯性的理解为擅长表现静态样式，动态的元素必须借助于 javascript 才可以实现，而 CSS3 的出现改变了这一思维方式。 CSS3 除了增加革命性的创新功能外，还提供了对动画的支持，可以用来实现旋转、缩放、平移、扭曲和过渡效果等等，这些功能再一次证明了 CSS3 功能的强大和无限潜能。　　CSS3 实现元素变形的基础来源于新增的 transform 属性，该属性可用于实现元素的旋转、缩放、平移、扭曲等效果。目前 webkit 内核支持 -webkit-transform 私有属性， Mozilla Geckos 内核支持 -moz-transform 私有属性， IE 浏览器支持 -ms-transform 私有属性。　　在部分的 test case 当中，每每演示 transform 属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为 transform 属性是动画属性。而恰恰相反， transform 属性是静态属性，一旦写到 style 里面，将会直接显示作用，无任何变化过程。 transform 的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是 css 的图形变形工具。　　关于图形变形的基础条件当中的原点设定，在 css 里面使用的是 transform

利用CSS3特性巧妙实现漂亮的DIV箭头

阅读更多关于利用CSS3特性巧妙实现漂亮的DIV箭头

DIV 箭头用于表现DIV内容的指向，是使用非常普遍的一种表现形式，例如新浪微博的消息转发：还有傲游网站的导航条：像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果。传统的实现方式都需要一副表示箭头的图片放在DIV上方来实现，例如新浪微博的相关CSS如下：而使用CSS3的特性，我们不需要图片就可以实现更加华丽的效果，这样做的好处还包括减少本地文件系统的读取、节省服务器带宽和连接数、避免文件下载失败带来的错误等等。实现的原理是：我们可以将箭头看作是一个矩形或者菱形的一个角，使用CSS3的属性transform来实现矩形的旋转。朝上的箭头需要将矩形旋转45度，我们使用transform: rotate(45deg)来实现，另外针对不同的浏览器还需要添加不同的hack，例如Opera的-o-transform、Firefox的-moz-transform，下面以Chrome浏览器为例实现一个样例。定义一个arrow-shadow样式，内容如下: .arrow-shadow { -webkit-transform:rotate(45deg); border:1px solid #AAAAAA; height:40px; position:absolute; width:40px; } 实现的效果如下所示：为了更加饱满，我们加上CSS3的盒阴影， .arrow

web前端入门到实战：使用 css3 transform 属性来变换背景图

阅读更多关于 web前端入门到实战：使用 css3 transform 属性来变换背景图

使用 css3 transform 属性可以轻易的旋转，倾斜，缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。 #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg); } 这个听起来很赞。然而，这个属性旋转了整个元素，包括他的内容、边框、背景图。如果你只是想旋转它的背景图而不选旋转内容的话，应该怎么做呢？或者你只想旋转内容，而不旋转背景图，这个又该怎么做呢？我们找到一个解决方式。这个方式本质上，是将背景图应用到某个元素的 before 或者 after 这种伪类元素上而不是应用到元素本身。然后在伪类元素独立的使用 transform 属性。仅仅变换背景这个元素可以使用任何样式，但一定要设置 position 属性，因为其伪类元素会基于它来定位。如果不想背景撑到元素外，那就要设置 overflow: hidden。 #myelement { position: relative; overflow: hidden; } web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（从零基础开始到前端项目实战教程，学习工具，职业规划）现在我们可以创建一个绝对定位的伪类元素来实现变换背景

订阅 css3旋转