11. 3D转换模块 CSS3背景

3D转换模块

• 什么是2D和3D
  • 2D是一个平面, 有宽度, 没有厚度(默认情况)
  • 3D是一个立体, 有宽度和高度, 有厚度
• 如何让某个元素成3D展现
  • transform默认为2D模式, 当子元素设置3D属性时, 则需要将他的父元素切换成transform-style:preserve-3d;属性才能生效
  • 练习: 自动翻转轮播图 色子的立体图 3D图片音乐墙

CSS3背景

• 背景尺寸属性background-size

    background-size: length|percentage|cover|contain;
    length: 设置背景图片宽度和高度
            第一个值设置宽度, 第二个值设置高度. 
            只设置一个值, 则第二个值为auto
    percentage: 以父元素的百分比来设置背景图片的宽度和高度
                第一个值设置宽度, 第二个值设置高度. 
                只设置一个值, 则第二个值为auto
    cover: 背景图宽高等比拉伸, 完全覆盖背景区域
    contain: 背景图宽高等比拉伸到最大尺寸, 使得内容区域完全包含背景图片
  

• 背景图片定位属性background-origin

    padding-box   默认. 背景图像相对于内边距框来定位。
    border-box    背景图像相对于边框盒来定位。
    content-box    背景图像相对于内容框来定位。
  

• 规定背景的绘制区域(背景被裁剪到-)background-clip: border-box 默认值|padding-box|content-box;

• 多重背景图

  • 背景图可以设置多张, 中间用逗号隔开
    • background: url("images/dog1.jpg") no-repeat,url('images/dog2.jpg') no-repeat right top;
  • 先引入的图片会覆盖后引入的图片