2D转换模块

2D转换模块

  • transform:rotate(45deg);_________旋转
  • transform:translate(50px,0px);_______平移
  • transform:scale(1.5,1);________缩放
    如果进行多次转换,中间用空格(不是逗号!)隔开
    2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
形变中心点
  • transform-origin:(可接受像素/百分比/特殊关键词三种取值)
旋转轴向
  • transform:rotateY(45deg);
    想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可
透视
  • perspective:500px;__________近大远小 (要添加到他的父元素上)
    一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
盒子阴影和文字阴影

1.如何给盒子添加阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

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

3.如何给文字添加阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;

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

推荐阅读更多精彩内容

  • 一. 2D转换模块 2D转换模块 二. 2D转换模块-形变中心点 默认情况下所有的元素都是以自己的中心点作为参考来...
    壹点微尘阅读 336评论 0 0
  • 2D转换模块 格式:transform:值; 取值:transform: rotate(45deg);(顺时针旋转...
    MGd阅读 264评论 0 0
  • # 2D转换模块 transform(旋转/缩放/平移) # 形变中心 transform-origin # 旋转...
    KsKison阅读 1,322评论 0 1
  • 第166课 2D转换模块 旋转 transform:rotate(45deg)deg是单位,代表多少度 平移 tr...
    S大偉阅读 232评论 0 0
  • 伟大的艺术品不必追随潮流,他本身就能引领潮流。 市场总是错的。 自由从何而来?从自信来,而自信则是从自律来!先学会...
    iamsea阅读 543评论 0 0