CSS-2D转换模块

缩放格式  transform:scale(1.5,0.5)
如果水平和垂直缩放都一样,那么可以简写为一个参数

注意点
1. 如果需要进行多个转换,那么用空格隔开
2. 2D的转换模块会修改元素的坐标系,所以旋转之后再平移就不是水平平移的

形变中心点

默认情况下所有的元素都是以自己的中心点作为参考来旋转的,我们可以通过形变中心点属性来修改他的参考点

取值有三种形式
具体像素;百分比;特殊关键字

格式
transform-origin:200px 100px;
transform-origin:100% 50%;
transform-origin:right center;

旋转轴向

默认情况下所有元素都是围绕Z轴进行旋转

想围绕哪个轴旋转,只需要在rotate后面加上哪个轴即可

透视

近大远小

格式:perspective:500px;

注意点
透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

给盒子添加阴影

box-shadow:水平位移  垂直位移  模糊度  阴影扩展  阴影颜色  内外阴影;

注意点
1. 盒子的阴影分为内阴影和外阴影,默认情况下就是外阴影
2. 快速添加阴影只需要编写三个参数即可
box-shadow:水平位移  垂直位移  模糊度
3. 默认情况下阴影的颜色和盒子内容的颜色一致

给文字添加阴影
text-shadow:水平位移  垂直位移  模糊度  阴影颜色;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,815评论 0 2
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,666评论 0 7
  • 关于css3变形 CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都被称作为变形函数(Tra...
    hopevow阅读 6,424评论 2 13
  • 如果一个人可以回到过去的某一个时光,你会选择回到什么时候呢? 也许有人会选择回到牙牙学语的时候;有人会选...
    在路上的南方姑娘阅读 509评论 0 1