css的3D转换

前端交互仔

已于 2022-01-24 22:46:54 修改

阅读量470

点赞数 1

分类专栏：前端(HTML CSS) 文章标签： css

于 2021-08-24 07:43:34 首次发布

本文链接：https://blog.csdn.net/liulang68/article/details/119881603

版权

前端(HTML 同时被 2 个专栏收录

235 篇文章 3 订阅

订阅专栏

CSS)

14 篇文章 1 订阅

订阅专栏

绕x轴旋转就是骑车蹬轮子的方法。
绕y轴就是旋转木马。
然z轴大转盘
在这里插入图片描述 1、默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处。
2、没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
3、如果把元素变换原点（transform-origin）设置0（x） 0（y），这个时候元素的变换原点转换到元素的左顶角处。
4、改变transform-origin属性的X轴和Y轴的值就可以重置元素变形原点位置，其基本语法如下所示:
transform-origin：[ | | left | center | right | top | bottom] | [ | | left | center | right] | [[ | | left | center | right] && [ | | top | center | bottom]] ?
transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。
5、2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Y轴的位置。
6、3D的变形中的transform-origin属性还包括了Z轴的第三个值。其各个值的取值简单说明如下：
x-offset：用来设置transform-origin水平方向X轴的偏移量，可以使用和值，同时也可以是正值（从中心点沿水平方向X轴向右偏移量），也可以是负值（从中心点沿水平方向X轴向左偏移量）。
offset-keyword：是top、right、bottom、left或center中的一个关键词，可以用来设置transform-origin的偏移量。
y-offset：用来设置transform-origin属性在垂直方向Y轴的偏移量，可以使用和值，同时可以是正值（从中心点沿垂直方向Y轴向下的偏移量），也可以是负值（从中心点沿垂直方向Y轴向上的偏移量）。
x-offset-keyword：是left、right或center中的一个关键词，可以用来设置transform-origin属性值在水平X轴的偏移量。
y-offset-keyword：是top、bottom或center中的一个关键词，可以用来设置transform-origin属性值在垂直方向Y轴的偏移量。
z-offset：用来设置3D变形中transform-origin远离用户眼睛视点的距离，默认值z=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>
        body {
            /* perspective: 1px; */
        }
        
        img {
            display: block;
            width: 500px;
            transition: all 3s;
            margin: 100px auto;
            
            
        }
        

        div :hover {
            /* 这是绕xy转，2d */
            /* transform: rotate(180deg); */
            /* transform: rotateX(180deg); */
            transform: rotateY(180deg);
            /* transform: rotateZ(180deg); */
            
        }
    </style>
</head>
<body>
    <div>
        <img src="../img/1.jpg" alt="">
    </div>
</body>
</html>

在这里插入图片描述

紫色盒子啪一下回原来的位置去了

在这里插入图片描述

<!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>
        body {
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
        }
        .box :hover {
            transform: rotateY(90deg);
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
            transition: all  5s;    
        }

        .box div:last-child {
            background-color: purple;
            transform: rotateX(80deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
</html>

<!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>
        body {
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
        }
        .box div:last-child:hover {
            transform: rotateX(80deg);
        }
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
            transition: all  5s;    
            transform: rotateY(60deg);
        }

        .box div:last-child {
            background-color: purple;
            /* transform: rotateX(90deg); */
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
</html>