CSS3 新特性

background-origin 属性

• 规定background-position属性相对于什么位置来定位，如果背景图像的 background-attachment属性为fixed，则该属性没有效果。
• 语法：

  // 默认值，背景图像相对于内边距框来定位
  background-origin: padding-box;
  // 背景图像相对于边框盒来定位
  background-origin: border-box;
  // 背景图像相对于内容框来定位
  background-origin: content-box;
  

background-clip 属性

• 规定背景的绘制区域
• 语法：

  // 默认值，背景被裁剪到边框盒
  background-clip: border-box;  
  // 背景被裁剪到内边距框
  background-clip: padding-box;
  // 背景被裁剪到内容框
  background-clip: content-box;
  

border-image 属性

• border-image属性是一个简写属性，用于设置以下属性：
  1. border-image-source：用在边框的图片的路径
  2. border-image-slice：图片边框向内偏移
  3. border-image-width：图片边框的宽度
  4. border-image-outset：边框图像区域超出边框的量
  5. border-image-repeat：图像边框是否应平铺repeated、铺满rounded或拉伸stretched

魔方效果

• transform拉伸、旋转，实现正方体结构
• 动画，实现整体旋转
• transform-style: preserve-3d;

<style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 300px;
            font-size: 50px;
            /* 设置 3D 效果 */
            transform-style: preserve-3d;
            animation: rotate 5s linear infinite;
        }
        .box > div {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: transparent;
        }
        li {
            float: left;
            margin: 5px;
            width: 90px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            border-radius: 20px;
        }
        .before li {
            background-color: green;
        }
        .back li {
            background-color: purple;
        }
        .top li {
            background-color: chartreuse;
        }
        .bottom li {
            background-color: pink;
        }
        .left li {
            background-color: darkorange;
        }
        .right li {
            background-color: yellow;
        }
        /* 设置每个面的旋转后的效果 */
        .left {
            transform: rotateY(-90deg) translateZ(150px);
        }
        .right {
            transform: rotateY(90deg) translateZ(150px);
        }
        .top {
            transform: rotateX(90deg) translateZ(150px);
        }
        .bottom {
            transform: rotateX(-90deg) translateZ(150px);
        }
        .before {
            transform: translateZ(150px);
        }
        .back {
            transform: translateZ(-150px);
        }
        @keyframes rotate {
            0% {
                transform: rotateY(0deg) rotateX(0deg);
            }
            100% {
                transform: rotateY(135deg) rotateX(45deg);
            }
        }
 </style>

 <div class="box">
        <div class="before">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
        </div>
        <div class="back">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
        </div>
        <div class="top">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
        </div>
        <div class="bottom">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
        </div>
        <div class="left">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
        </div>
</div>