html5——3D转换

角度旋转

rotateX：默认以center绕x轴旋转

rotateY：默认以center绕y轴旋转

rotateZ：默认以cente绕z轴r旋转

//rotateX原点为center==》正值(顶部)远离屏幕，负值(顶部)接近屏幕
//rotateX原点为top==》正值(底部)接近屏幕，负值(底部)远离屏幕
//rotateX原点为bottom==》正值(顶部)远离屏幕，负值(顶部)接近屏幕
//rotateY原点为center==》正值(左侧)接近屏幕，负值(左侧)远离屏幕
//rotateY原点为left==》正值(右侧)远离屏幕，负值(右侧)接近屏幕
//rotateY原点为right==》正值(左侧)接近屏幕，负值(左侧)远离屏

距离位移

translateX：以x轴为基准移动，右为正值

translateY：以y轴为基准移动，上为正值

translateZ：以z轴为基准移动，靠近屏幕为正值

旋转中心

transform-origin：top//绕着y轴的顶部进行旋转

transform-origin: x-axis y-axis z-axis;//第三个参数可以不写
x-axis：left、center、right、length、%
y-axis：top、center、bottom、length、%
z-axis：length

透视

1、透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

2、透视是加给父盒子的

3、透视的值表示是2D平面距离屏幕的距离

perspective: 100px;//只有父盒子有此属性

3D呈现

1、只有规定了3d呈现方式为3d才会有显示效果

2、preserve-3d属性是加给父盒子的

transform-style: flat;//所有子元素在 2D 平面呈现
transform-style: preserve-3d;//保留3D空间

背面可见

backface-visibility: hidden;//背部隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            margin-top: 10px;
            margin-left: 100px;
            float: left;
            border: 1px solid #ccc;
            perspective: 100px;
        }

        .box > div {
            text-align: center;
            width: 150px;
            height: 150px;
            margin: 30px auto;
            background-color: blue;
            transition: all 1s;
        }

        .box:nth-child(1) div:hover {
            transform: rotateX(360deg);
        }

        .box:nth-child(2) div:hover {
            transform: rotateY(360deg);
        }

        .box:nth-child(3) div:hover {
            transform: rotateZ(360deg);
        }

        .box:nth-child(4) div:hover {
            transform: translateX(300px);
        }

        .box:nth-child(5) div:hover {
            transform: translateY(300px);
        }

        .box:nth-child(6) div:hover {
            transform: translateZ(50px);
        }
    </style>
</head>
<body>
<div class="box">
    <div>rotateX</div>
</div>
<div class="box">
    <div>rotateY</div>
</div>
<div class="box">
    <div>rotateZ</div>
</div>
<div class="box">
    <div>translateX</div>
</div>
<div class="box">
    <div>translateY</div>
</div>
<div class="box">
    <div>translateZ</div>
</div>
</body>
</html>