文章关键字 ‘transform’

Chrome opacity非1时border-radius圆角边框剪裁问题

2017年10月19日,星期四

border-radius:50%可以让元素正方形元素表现为正圆,如果元素设置了border边框,则会表现为一个正圆圈圈,但有时候,border边框的这个圈圈会在边缘处发生剪裁,不是一个完美的圈圈了,这是如何发生的呢?

阅读全文…

巧用浏览器CSS属性值的不兼容向下兼容hack技巧

2016年10月25日,星期二

CSS3中有很多好的特性,例如box-shadow盒阴影,但是,唯一的问题是IE8浏览器不支持,如果是对外的PC站点,则IE8浏览器不可不顾,尤其一些受众广泛的网站。

怎么办呢?我的做法往往是这样,IE9+浏览器使用box-shadow阴影,而IE7,IE8浏览器使用border线框。

我们一般采用一些CSS hack技巧,例如使用:root伪类,从功能上满足了我们的开发需求,但提高了我们的CSS权重,很容易增加我们CSS代码的复杂度,那有没有更好的实现呢?

阅读全文…

Safari 3D transform变换z-index层级渲染异常的研究

2016年08月7日,星期日

Safari被戏称为新时代的IE6,就是因为其有各种各种奇怪的渲染问题,或明显的渲染bug, 而这些bug都是IE浏览器不会犯的,着实让人头疼。

而本文这里要展示的3D变换影响层级渲染也是Safari浏览器专有的问题,不妨进来看看,说不定下次遇到类似问题就知道是怎么回事,该怎么解决了~~

阅读全文…

基于clip-path的任意元素的碎片拼接动效

2016年06月7日,星期二

看电影的时候会有特效,反派被攻击的粉碎,依然可以零零碎碎的拼接成完整体。在网页中,我们可以使用类似的效果,而且使用CSS3就可以,而且可以让任意的元素有这种效果。不信?你点击去看看就知道了~~

阅读全文…

深入理解CSS中的层叠上下文和层叠顺序

2016年01月9日,星期六

本文是最近1-2个月最用心的文章,理解本文内容,就会明白网页中元素层叠的时候为什么会这样表现了,相信本文的内容一定会对您的学习有所帮助的。

阅读全文…

小tips: zoom和transform:scale的区别

2015年11月3日,星期二

本文内容如题,从表层和深层好好对比了 zoom和transform:scale的区别,有截图,有demo,希望本文的内容能够对您的学习有所帮助。

阅读全文…

理解SVG transform坐标变换

2015年10月10日,星期六

本文是SVG学习基本且重要的知识点。本文相当详尽的讲解了SVG transform变换的语法、特点以及一些实际的处理等等。有相当多的截图,源代码展示,还有必要的demo,对了,还有很多gif示意。如果你要学习SVG, 本文内容一定会对你的学有所帮助的。

阅读全文…

CSS3 transform对普通元素的N多渲染影响

2015年05月21日,星期四

一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0,0)),但是,实际上,对这些元素还是造成了写深远的影响。所谓表面无恙,内心奔溃的真实写照。

本文就列举几个目前我所知的transform影响CSS2.1中普通元素渲染表现的例子……一如既往,有Demo,有截图,有必要的源代码展示。总之,希望本文的内容能够对您的学习有所帮助~~

阅读全文…

小tip: 纯CSS实现视差滚动效果

2015年03月17日,星期二

视差滚动效果大家可能都听过,基本上都是JS实现的。

实际上,如果你对兼容性要求不是很高,比方说忽略IE浏览器,则我们使用简单的几行CSS代码就可以实现视差滚动效果了。而本文就是介绍如何使用CSS实现视差滚动效果的。有Demo有截图有源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip: IE下zoom或Matrix矩阵滤镜中心点变换实现

2015年02月15日,星期日

IE的Matrix矩阵变换,或者zoom缩放会改变元素原本占据的展示尺寸,位置等,与CSS3优雅的transform完全不一样,导致,我们需要对IE做额外的偏移。

但是,我们大多数人的数学都是体育老师交的,计算偏移值什么的,想想就大头娘娘了,难道,就不能跟CSS3 transform一样,就规规矩矩居中放大吗?

童鞋,略施小计,还是有办法滴……

阅读全文…