CSS3中的背景相关属性包括多背景图片设置、背景尺寸、背景定位等。以下是一些使用CSS3新增背景属性的示例：

1. 多背景图片设置：

.multi-background {
  background-image: url(image1.jpg), url(image2.jpg);
  background-position: left top, right bottom;
  background-size: auto, cover;
}

2. 背景尺寸设置（背景图片的大小）：

.background-size {
  background-size: 100px 150px; /* 宽度100px, 高度150px */
}

3. 背景剪切模式：

.background-origin {
  background-origin: border-box; /* 背景图片从边框开始显示 */
}

4. 背景不重复：

.background-repeat {
  background-repeat: no-repeat; /* 背景图片不重复 */
}

5. 背景图片的显示区域：

.background-clip {
  background-clip: content-box; /* 背景图片仅在内容区域显示 */
}

6. 使用线性渐变作为背景，并设置渐变方向：

.background-gradient {
  background-image: linear-gradient(to right, red, yellow);
}

7. 使用径向渐变作为背景：

.background-gradient-radial {
  background-image: radial-gradient(circle, red, yellow, green);
}

8. 背景图片固定（当页面滚动时背景不动）：

.background-attachment {
  background-attachment: fixed;
}

以上代码示例展示了如何使用CSS3的新属性来设置元素的背景样式。在实际开发中，可以根据需要选择和组合这些属性以达到预期的设计效果。

要使用CSS来实现平滑滚动到页面顶部的效果，可以使用scroll-behavior属性。但是，scroll-behavior属性目前并不是所有浏览器都支持，它是一个较新的特性。

如果你的目标用户使用的浏览器支持这个属性，你可以这样做：

1. 将scroll-behavior属性设置为smooth在你想要平滑滚动的容器上，比如在body或html标签上。
2. 创建一个锚点，通常是一个链接指向页面顶部的某个元素。

示例代码：

html {
  scroll-behavior: smooth;
}

<!-- 创建一个锚点链接到页面顶部 -->
<a href="#top">回到顶部</a>
 
<!-- 设置一个锚点，通常是一个隐藏的元素 -->
<div id="top" style="display: none;"></div>

当用户点击“回到顶部”链接时，页面会平滑滚动到<div id="top"></div>这个位置，因为你已经在html标签上设置了scroll-behavior: smooth;，所以滚动会是平滑的。

如果scroll-behavior属性不被支持，你可能需要依赖JavaScript来实现相同的功能。这里是一个简单的JavaScript示例：

<!-- 创建一个点击回到顶部的按钮 -->
<button onclick="scrollToTop()">回到顶部</button>
 
<script>
function scrollToTop() {
  // 使用window.scrollTo平滑滚动到页面顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
</script>

在不支持scroll-behavior的浏览器中，这个JavaScript函数会在用户点击按钮时触发平滑滚动到页面顶部的效果。

CSS3的columns属性可以用来创建多列布局。该属性允许你指定列宽和列数，还可以设置列间距。

columns属性的基本语法如下：

columns: <column-width> || <column-count>;

其中，<column-width>可以是具体的宽度值，也可以是百分比，用来指定列宽；<column-count>是一个整数，用来指定列数。

下面是一个简单的多列布局示例：

div.multi-column {
  -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
  -moz-columns: 100px 3;    /* Firefox */
  columns: 100px 3;         /* 标准语法 */
}

这段代码会将div元素内的内容分成3列，每列宽度为100px。

如果你想要设置列间距，可以使用column-gap属性：

div.multi-column {
  -webkit-columns: 100px 3;
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-columns: 100px 3;
  -moz-column-gap: 20px;    /* Firefox */
  columns: 100px 3;
  column-gap: 20px;         /* 标准语法 */
}

这样就会在列之间添加20px的间隔。

/* 设置基本样式 */
.container {
  width: 100%;
  margin: auto;
  background-color: #f8f8f8;
}
 
/* 媒体查询实现响应式布局 */
@media (min-width: 768px) {
  .container {
    max-width: 750px; /* 设置最大宽度 */
  }
}
 
@media (min-width: 992px) {
  .container {
    max-width: 970px; /* 设置最大宽度 */
  }
}
 
@media (min-width: 1200px) {
  .container {
    max-width: 1170px; /* 设置最大宽度 */
  }
}

这段代码定义了一个.container类，并使用媒体查询定义了在不同屏幕宽度下的最大宽度，以实现响应式布局。在小屏设备上，容器将占据全部宽度；在大屏设备上，容器宽度会有所限制，分别在平板、笔记本、大屏电脑上有所增加，以适应不同的屏幕尺寸。

/* 设置父容器样式 */
.parent-container {
    perspective: 1000px; /* 设置透视距离，增加3D效果 */
}
 
/* 设置银行卡的共有样式 */
.card {
    width: 100px;
    height: 150px;
    background-color: #FFF;
    border: 1px solid #000;
    margin: 10px;
    /* 其他样式略 */
}
 
/* 设置银行卡的3D旋转动画 */
@keyframes rotate3D {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
 
/* 设置第一张银行卡的样式 */
.card-1 {
    transform: translateZ(50px); /* 将卡片移到屏幕前方 */
    animation: rotate3D 5s infinite linear; /* 应用3D旋转动画 */
}
 
/* 设置第二张银行卡的样式 */
.card-2 {
    transform: rotateX(90deg) translateZ(50px); /* 将卡片旋转90度并移到屏幕前方 */
    animation: rotate3D 10s infinite linear; /* 应用3D旋转动画，动画时间不同 */
}
 
/* 设置第三张银行卡的样式 */
.card-3 {
    transform: rotateX(180deg) translateZ(50px); /* 将卡片旋转180度并移到屏幕前方 */
    animation: rotate3D 15s infinite linear; /* 应用3D旋转动画，动画时间稍短 */
}
 
/* 设置第四张银行卡的样式 */
.card-4 {
    transform: rotateX(270deg) translateZ(50px); /* 将卡片旋转270度并移到屏幕前方 */
    animation: rotate3D 20s infinite linear; /* 应用3D旋转动画，动画时间稍长 */
}
 
/* 设置第五张银行卡的样式 */
.card-5 {
    transform: rotateX(360deg) translateZ(50px); /* 将卡片旋转360度并移到屏幕前方 */
    animation: rotate3D 25s infinite linear; /* 应用3D旋转动画，动画时间稍短 */
}

这个代码实例展示了如何使用CSS3的@keyframes和transform属性来创建一个3D银行卡层叠展示的动画效果。每张银行卡都被分配了一个从0度到360度的旋转动画，并且每张卡的旋转速度和动画时间都有所不同，从而创建出一种层叠和动感十足的视觉效果。

/* 定义关键帧 */
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
 
/* 使用动画 */
.slide-in-from-left {
  animation: slideInFromLeft 1s ease forwards;
}
 
/* 其他动画类似定义... */

在HTML中使用这些动画类：

<div class="slide-in-from-left">这是一个从左侧滑入的元素</div>

这段代码定义了一个从左侧进入的动画，并且只需要给元素添加对应的类名即可实现动画效果。其他动画效果也可以以类似方式实现。

在CSS3中，平面转换主要是通过transform属性中的translate, rotate, scale和skew函数来实现的。而空间转换则是通过perspective属性来实现。动画则可以通过@keyframes规则和animation属性来实现。

以下是一个简单的示例，展示了如何使用这些技术：

/* 定义动画 */
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
 
/* 应用动画到元素 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px;
  perspective: 1000px; /* 设置3D空间转换的视角 */
  animation: spin 2s linear infinite; /* 使用动画 */
}
 
/* 在鼠标悬停时，停止旋转 */
.box:hover {
  animation-play-state: paused;
}

<div class="box"></div>

在这个例子中，.box元素在3D空间中旋转，动画通过perspective创建一个3D效果，并且通过animation应用无限循环的旋转动画。当鼠标悬停在元素上时，动画会停止。

在CSS中，媒体查询（Media Queries）是一种强大的工具，可以让你根据设备的特性（如屏幕尺寸、分辨率等）来应用不同的样式规则。

媒体查询可以使用两种方式：

1. 通过@media指令在CSS中直接使用。
2. 在HTML文档的<link>标签中使用。

下面是使用@media指令在CSS中的一个例子：

/* 应用于所有设备的基础样式 */
body {
  background-color: lightblue;
  color: white;
  font-size: 16px;
}
 
/* 仅当屏幕宽度至少为 600px 时应用以下样式 */
@media only screen and (min-width: 600px) {
  body {
    background-color: darkblue;
    color: black;
    font-size: 20px;
  }
}
 
/* 仅当设备是打印机时应用以下样式 */
@media print {
  body {
    background-color: white;
    color: black;
    font-size: 12px;
  }
}

在HTML中使用媒体查询的例子：

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在上述例子中，print.css样式表仅在打印文档时应用。

注意：在实际开发中，媒体查询通常用于响应式设计，以便让网站在不同的设备上都可以良好显示，提高用户体验。

在CSS中，我们可以使用transform: scale()函数来实现图片的放大效果，并结合:hover伪类来实现鼠标悬停时的放大效果。以下是一个简单的例子：

HTML:

<div class="image-container">
  <img src="image.jpg" alt="Sample Image">
</div>

CSS:

.image-container {
  overflow: hidden; /* 确保放大后的图片不超出容器 */
  display: inline-block;
}
 
.image-container img {
  transition: transform 0.3s ease; /* 定义过渡效果 */
  max-width: 100%; /* 限制图片宽度不超过容器宽度 */
  vertical-align: middle; /* 确保图片垂直居中 */
}
 
.image-container:hover img {
  transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */
}

在这个例子中，.image-container 是一个用于包裹图片的容器，它会限制图片的大小，并且在图片上应用一个过渡效果，使得放大缩小变化时不会突兀。.image-container:hover img 是当鼠标悬停在 .image-container 上时，内部 img 元素的样式变化，使图片放大1.1倍。

在学习H5和CSS3的过程中，可以通过创建一个简单的HTML页面并为其添加CSS样式来提升技术。以下是一个示例代码，展示了如何使用H5和CSS3来增强页面视觉效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5和CSS3提升</title>
    <style>
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        header {
            text-align: center;
            padding: 20px;
        }
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            display: inline-block;
            margin-right: 10px;
        }
        nav ul li a {
            text-decoration: none;
            color: #000;
            padding: 5px 10px;
            border: 1px solid transparent;
            transition: all 0.3s ease;
        }
        nav ul li a:hover {
            background-color: #007bff;
            color: #fff;
            border-color: #007bff;
        }
    </style>
</head>
<body>
    <header>
        <h1>H5和CSS3提升</h1>
    </header>
    <div class="container">
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">产品服务</a></li>
                <li><a href="#">联系方式</a></li>
            </ul>
        </nav>
        <article>
            <h2>H5和CSS3提升</h2>
            <p>这是一个学习H5和CSS3的示例文本。</p>
        </article>
    </div>
</body>
</html>

这段代码展示了如何使用H5标签（如header, nav, article）以及CSS3的特性（如box-shadow, transition）来增强页面的视觉效果和用户体验。通过这个示例，学习者可以理解如何使用H5和CSS3来创建更现代和响应式的网页设计。