Web开发学习笔记(36)——CSS3(10)2D和3D的转换-1-技术教程-四时宝库

（1）transform-origin 属性：

transform-origin 属性允许更改转换元素在 X 轴、Y 轴、Z 轴上的位置。

其语法格式为：

transform-origin: x-axis y-axis z-axis;

其属性值的意义如下所示：

值	描述
x-axis	定义视图被置于 X 轴的何处。
y-axis	定义视图被置于 Y 轴的何处。
z-axis	定义视图被置于 Z 轴的何处。

注：margin和padding的区别，以下代码用到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father{
            height:100px;
            width:150px;
            margin:20px;
            border:5px solid rgb(124, 172, 217);
        }
        #child{
            padding: 50px;
            position:absolute;
            border:5px solid rgb(122, 166, 207);
            background-color:yellow;
            transform:rotate(45deg);
            transform-origin:80% 90% 1000px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="child"></div>
    </div>
</body>
</html>

（2）transform-style 属性：

transform-style 属性指定嵌套元素是怎样在三维空间中呈现。

其语法格式如下所示：

transform-style: flat|preserve-3d;

值	描述
flat	表示所有子元素在 2D 平面呈现。
preserve-3d	表示所有子元素在 3D 空间中呈现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #item1{
            position:relative;
            height:200px;
            width:200px;
            margin:100px;
            padding:10px;
            border:1px solid rgb(136, 255, 0);
        }
        #item2{
            padding:50px;
            position:absolute;
            border:10px solid rgb(48,96, 128);
            background-color:rgb(6, 99, 39);
            transform:rotateY(60deg);
            transform-style: preserve-3d;
        }
        #item3{
            padding:40px;
            position:absolute;
            border:10px solid rgb(68,13,105);
            background-color:yellow;
            transform:rotateY(-60deg);
        }
    </style>
</head>
<body>
    <div id="item1">
        <div id="item2">
            <div id="item3"></div>
        </div>
    </div>
</body>
</html>

（3）perspective 属性：

perspective 属性允许你改变 3D 元素查看透视图的方式。在定义时它是一个元素的子元素透视图，而不是元素本身。

其语法格式为：

perspective: number|none;

值	描述
number	元素距离视图的距离，以像素计算。
none	默认值。与 0 相同。不设置透视。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #item1{
            position:relative;
            height:150px;
            width:150px;
            margin:50px;
            border:1px solid rgb(31,97,51);
            perspective:150;
            -webkit-perspective: 150;
        }
        #item2{
            padding:50px;
            position:absolute;
            border:1px solid rgba(169, 226, 10, 0.959);
            background-color:rgba(0, 255, 128, 0.082);
            transform:rotateX(45deg);
        }
    </style>
</head>
<body>
    <div id="item1">
        <div id="item2">123</div>
    </div>
</body>
</html>

（4）perspective-origin 属性：

perspective-origin 属性定义基于的 X 轴和 Y 轴的 3D 元素。该属性允许改变 3D 元素的底部位置。

其语法格式为：

perspective-origin: x-axis y-axis;

其属性值的意义如下所示：

值	描述
x-axis	定义该视图在 x 轴上的位置。默认值：50%。
y-axis	定义该视图在 y 轴上的位置。默认值：50%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #item1{
            position:relative;
            height:150px;
            width:150px;
            margin:50px;
            padding:10px;
            border:1px solid rgb(13, 111, 124);
            perspective:150;
            perspective-origin:10% 10%;
            -webkit-perspective:150;
            -webkit-perspective-origin:10% 10%;
        }
        #item2{
            padding:50px;
            position:absolute;
            border:1px solid rgb(43, 139, 64);
            background-color:#327ceb;
            transform:rotateX(45deg);
        }
    </style>
</head>
<body>
    <div id="item1">
        <div id="item2">王耶浪Web开发学习笔记</div>
    </div>
</body>
</html>

（5）练习一下：

新建一个 index.html 文件。
页面上会显示同一张照片的三张镜像效果，使用以下命令可获取图片。
wget https://labfile.oss.aliyuncs.com/courses/3429/aneta.jpg
第一张为原图，第二张图片沿 Y 轴向下翻转，第三张图片沿 X 轴向左翻转，第四张图片沿 Y 轴向下翻转，又沿 X 轴向左翻转。
当鼠标放置在被翻转的图片上会显示原图的模样。
图片大小设置：宽为 100 个像素，高为 150 个像素，且圆角显示。

完成代码后，会看到如下效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width:150;
            height:250px;
            border-radius:25px;
        }
        .img2:hover{
            transform:scale(-1);
        }
        .img3:hover{
            transform:scaleX(-1);
        }
        .img4:hover{
            transform:rotateX(180deg);
            transition: transform 1s;
        }
    </style>
</head>
<body>
    <div>
        <img src="https://labfile.oss.aliyuncs.com/courses/3429/aneta.jpg" alt="hello " class="img1">
        <img src="https://labfile.oss.aliyuncs.com/courses/3429/aneta.jpg" alt="" class="img2">
        <br/>
        <img src="https://labfile.oss.aliyuncs.com/courses/3429/aneta.jpg" alt="" class="img3">
        <img src="https://labfile.oss.aliyuncs.com/courses/3429/aneta.jpg" alt="" class="img4">
    </div>
</body>
</html>

四时宝库

程序员的知识宝库

Web开发学习笔记(36)——CSS3(10)2D和3D的转换-1