1 2D 转换

梓旭 • 2021年8月27日 pm2:31 • 编程

1 2D 转换

转换是 CSS3 中具有颠覆性的⼀个特征，可以实现元素的位移、旋转、变形、缩放。

通过 transform 转换来实现 2D 转换或者 3D 转换。

作用：transform翻译是使...变形,css中transform就是通过css来改变元素的形状和位置（实现元素的移动，旋转，缩放等效果），元素变形不会影响到页面布局

transform只是一个大的属性，但是元素具体怎么变形还要通过transform的值来决定，tansform的值都为函数，（什么是函数我们先不深究，记住带括号的就是函数，就像之前饿url()就是函数）

2D 转换包括：

缩放 scale
移动 translate
旋转 rotate
倾斜 skew（了解）

1.1移动 translate

2D 移动是 2D 转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法：

transform: translate(x, y); 综合写法，如果只写⼀个值，则表示水平移动
transform: translateX(n);
transform: translateY(n);
transform：translateX(x) translateY(y); 在x，y轴都移动

transform属性是一个简写属性，所有元素变形相关的属性可以统一设置

注意：

translate()函数，参数x，y分别代表了元素在水平方向和垂直方向的移动的距离，中间使用逗号分开

translate 最大的优点：不会影响到其他元素的位置
对行内标签没有效果
x y 可以采用数字加单位的精确值，也可以是百分比，百分比是相对于元素自身的宽度或高度和计算的

采用margin移动的百分比是相对于父元素的宽度计算的，采用定位移动的百分比是相对于父元素的宽度或高度计算的

使用：让绝对定位中的盒子在父元素里居中，我们知道，如果想让⼀个标准流中的盒子在父盒子里居中（水平方向看），可以将其设置 margin: 0 auto; 属性。

x y的取值为正值的时候向着坐标轴的正方向移动，负值向着坐标轴负方移动

如果盒子是绝对定位的，如果还想让其居中（位于父盒子的正中间），之前的做法是利用 margin 负值。

<style>
    .wrapper {
        float: left;
        width: 600px;
        height: 600px;
        background: #0000ff;
        position: relative;
    }

    .box {
        float: left;
        width: 200px;
        height: 200px;
    }

    .box1 {
        background: #ff0000;
        margin: -100px 0 0 -100px;
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 9;
    }
</style>
<div class="wrapper">
    <div class="box box1"></div>
</div>

现在，我们还可以利用 translate 偏移来做，这也是比较推荐的写法

<style>
    .wrapper {
        float: left;
        width: 600px;
        height: 600px;
        background: #0000ff;
        position: relative;
    }

    .box {
        float: left;
        width: 200px;
        height: 200px;
    }

    .box1 {
        background: #ff0000;
        transform: translate(-50%, -50%);
        position: absolute;
        left: 50%;
        top: 50%; 
        z-index: 9;
    }
</style>
<div class="wrapper">
    <div class="box box1"></div>
</div>

1.2旋转 rotate

2D 旋转指的是让元素在 2 维平面内顺时针旋转或者逆时针旋转。

语法：

transform: rotate(角度);
transform: rotate(45deg);

注意：

度数单位是deg transform:rotate(30deg)

单位是turn transform：rotate(0.5turn) 旋转0.5圈
默认情况下是以元素的中心为旋转点旋转，顺时针旋转是正值，逆时针旋转是负值，旋转一周是360deg
默认旋转的中心点是元素的中心点

rotate 旋转时，默认是以盒子的正中心为坐标原点的。

用法：

<style>
    .rotate {
        width: 100px;
        height: 100px;
        background: #000fff;
    }

    .rotate:hover {
        transform: rotate(45deg);
    }
</style>
<div class="rotate"></div>

transform 可以书写多个 2D 转换，中间用空格隔开。

我们可以将 transform 的两个属性合并起来写。

<style>
    .rotate {
        width: 100px;
        height: 100px;
    }

    .rotate1 {
        background: #000fff;
    }

    .rotate2 {
        background: #00ff00;
    }

    .rotate1:hover {
        transform: translate(200px) rotate(45deg);
    }

    .rotate2:hover {
        transform: rotate(45deg) translate(200px);
    }
</style>
<div class="rotate rotate1"></div>
<div class="rotate rotate2"></div>

但是这两者效果不同，第⼀种是先平移再旋转，第⼆种是先旋转再平移。

1.2.1 transform-origin 转换中心点

作用：设置元素的变形的原点。中心点. origin 起源

如果想改变 2D 转换（变形）的中心点，可以用 transform-origin 属性，可以设置元素转换的中心点。

格式：

transform-origin:x y;
transform-origin: 水平坐标 垂直坐标; 
transform-origin: 50px 50px;
transform-origin: center bottom;

取值：
- 默认的转换中心点是元素的中心点（50% 50%），百分比是相对于元素自身的宽度或高度和计算的
- x y可以是精确值（数值px），也可以是百分比，方位名词

实现扑克牌效果

 <style>
        .box {
            background-color: blue;
            width: 300px;
            height: 440px;
            margin: 100px auto;
            position: relative;
        }

        .item {
            overflow: hidden;
            width: 100%;
            height: 100%;
            border: 1px solid #fff000;
            position: absolute;
            left: 0;
            top: 0;
            /* 变换中心原点 */
            transform-origin: center bottom;
        }

        .item img {
            width: 100%;
            height: 100%;
        }


        .box:hover .item:nth-child(6) {
            transform: rotate(-10deg);
        }

        .box:hover .item:nth-child(5) {
            transform: rotate(-20deg);
        }

        .box:hover .item:nth-child(4) {
            transform: rotate(-30deg);
        }

        .box:hover .item:nth-child(3) {
            transform: rotate(-40deg);
        }

        .box:hover .item:nth-child(2) {
            transform: rotate(-50deg);
        }

        .box:hover .item:nth-child(1) {
            transform: rotate(-60deg);
        }

        .box:hover .item:nth-child(8) {
            transform: rotate(10deg);
        }

        .box:hover .item:nth-child(9) {
            transform: rotate(20deg);
        }

        .box:hover .item:nth-child(10) {
            transform: rotate(30deg);
        }

        .box:hover .item:nth-child(11) {
            transform: rotate(40deg);
        }

        .box:hover .item:nth-child(12) {
            transform: rotate(50deg);
        }

        .box:hover .item:nth-child(13) {
            transform: rotate(60deg);
        }
    </style>

    <div class="box">
        <div class="item">
            <img src="https://img2.baidu.com/it/u=652577116,728937411&fm=253&fmt=auto&app=138&f=JPEG?w=362&h=500"
                alt="">
        </div>
        <div class="item">
            <img src="https://img1.baidu.com/it/u=3227530107,1890095781&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=680"
                alt="">
        </div>
        <div class="item">
            <img src="https://img1.baidu.com/it/u=4103638913,2253586169&fm=253&fmt=auto&app=138&f=JPEG?w=362&h=500"
                alt="">
        </div>
        <div class="item"><img
                src="https://img1.baidu.com/it/u=4231295344,2749829711&fm=253&fmt=auto&app=120&f=JPEG?w=310&h=438"
                alt=""></div>
        <div class="item"><img
                src="https://img0.baidu.com/it/u=8074880,4005437554&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=686" alt="">
        </div>
        <div class="item"><img
                src="https://img2.baidu.com/it/u=3200180536,270841933&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=686"
                alt=""></div>
        <div class="item"><img
                src="https://img1.baidu.com/it/u=176624038,3092799378&fm=253&fmt=auto&app=138&f=JPEG?w=354&h=500"
                alt="">

        </div>
        <div class="item"><img
                src="https://img0.baidu.com/it/u=3706709010,123557305&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501"
                alt=""></div>
        <div class="item"><img
                src="https://img0.baidu.com/it/u=557037764,1399334379&fm=253&fmt=auto&app=138&f=JPEG?w=287&h=340"
                alt=""></div>
        <div class="item"><img
                src="https://img0.baidu.com/it/u=2433907091,3257276515&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=658"
                alt=""></div>
        <div class="item"><img
                src="https://img1.baidu.com/it/u=2907312250,1189654355&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=686"
                alt=""></div>
        <div class="item"><img
                src="https://img1.baidu.com/it/u=2045826843,2280660658&fm=253&fmt=auto&app=138&f=JPG?w=226&h=300"
                alt=""></div>
        <div class="item">
            <img src="https://img2.baidu.com/it/u=2370723071,3816164458&fm=253&fmt=auto&app=138&f=JPEG?w=283&h=500"
                alt="">
        </div>
    </div>

1.3 缩放 scale

作用在；设置元素的放大和缩小

格式：

transform:scale(x,y);  水平和垂直双方向缩      放参数用,分隔

x，y是元素宽度和高度的缩放倍数，没有单位不能使用百分比
transform:scale(1,1); 缩放一倍即没有缩放 x y的值一样时可以只写一个即transform:scale(1);
transform:scale(0.5); 小于1的值是缩小。只写一个值的时候就是等比例缩放
使用此方式缩放元素的优点是：不影响其他元素，如果直接修改元素的宽高的话影响其他元素。
transform：scale()是可以通过transform-origin设置缩放的中心点的,缩放是以转化中心点为缩放中心的

<style>
    .box {
        float: left;
        width: 200px;
        height: 200px;
    }

    .box1 {
        transform: scale(1.2);
        background: #ff0000;
    }

    .box2 {
        background: #00ff00;
    }
</style>
<div class="box box1"></div>
<div class="box box2"></div>

1.4 倾斜 skew（了解）

设置元素的倾斜

语法：

transform: skew(水平倾斜角度，垂直倾斜角度);
transform: skew(45deg,10deg);

参数：

单位是deg
正值：顺时针倾斜
负值：逆时针倾斜

<style>
	.skew {
		width: 100px;
		height: 100px;
		background: #000fff;
	}

	.skew:hover {
		transform: skew(45deg, 10deg);
	}
</style>
<div class="skew"></div>

1.5 2D 转换总结

转换 transform 我们简单理解就是变形有2D 和 3D 之分
2D 转换不会影响到其他元素对行内标签没有效果
2D 移动 translate(x, y) 里面参数用%，是相对于自身宽度和高度来计算的
2D 旋转 rotate(度数) 可以实现旋转元素度数的单位是deg 圈turn
2D 缩放 sacle(x,y) 里面参数是数字，不跟单位，可以是小数
设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词
复合写法：可以同时添加多个变形操作，先执行前面的，再执行后面的

transform的简写

tansform可以将位移，旋转，缩放综合写，但是有顺序之分，在有位移的情况下要把位移放在最前面

transform：translate() scale() rotate()等;

因为旋转会影响元素的中心点，先旋转在位移元素会跑偏

案例：实现红心效果

https://blog.csdn.net/qq_29319817/article/details/76407427

<style>
	.heart {
		position: relative;
		width: 100px;
		height: 100px;
		margin-top: 80px;
	}

	.heart:before,
	.heart:after {
		position: absolute;
		content: "";
		left: 50px;
		top: 0;
		width: 50px;
		height: 80px;
		background: red;
		border-radius: 50px 50px 0 0;
		transform: rotate(-45deg);
		transform-origin: 0 100%;
	}

	.heart:after {
		left: 0;
		transform: rotate(45deg);
		transform-origin: 100% 100%;
	}

	.heart:hover {
		transform: scale(1.2);
	}
</style>
<div class="heart"></div>

###

2 3D 转换

照片就是 3D 物体在2D平面呈现的例子。

3D转换的特点：

近大远小。
物体后面遮挡不可见

三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
x轴：水平向右，注意： x 右边是正值，左边是负值
y轴：垂直向下，注意： y 下面是正值，上面是负值
z轴：垂直屏幕，注意：往外面是正值，往里面是负值

3D呈现：transform-style，控制子元素是否开启三维立体环境

flat 子元素2D显示（默认）
preserve-3d 子元素3D显示
样式写给父元素，但是影响的是子元素

2.1 3D 缩放 scale3d

transform：scaleX() 水平方向缩放
transform：scaleY() 垂直方向缩放

2.1.1 scaleX

元素沿着 X 轴缩放

语法：

transform: scaleX(x);
transform: scaleX(1.2);

参数：

x：表示水平方向的缩放倍数

取值：

大于1表示放大
小于1表示缩小
不能为百分比

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
	}

	.box>.fill {
        height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.scaleX:hover .fill {
		transform: scaleX(2);
	}
</style>
<div class="box scaleX">
	<div class="fill"></div>
</div>

2.1.2 scaleY

元素沿着 Y 轴缩放

语法：

transform: scaleY(y);
transform: scaleY(1.2);

参数：

y：表示垂直方向的缩放倍数

取值：

大于1表示放大
小于1表示缩小
不能为百分比

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
	}

	.box>.fill {
        height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.scaleY:hover .fill {
		transform: scaleY(2);
	}
</style>
<div class="box scaleY">
	<div class="fill"></div>
</div>

2.1.3 scaleZ

元素沿着 Z 轴缩放

语法：

transform: scaleZ(z);
transform: scaleZ(1.2);

参数：

z：表示面向屏幕方向的缩放倍数

取值：

大于1表示放大
小于1表示缩小
不能为百分比

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        perspective: 800px;
	}

	.box>.fill {
        height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.scaleZ:hover .fill {
		transform: scaleZ(2);
	}
    //z轴上缩放是看不到 注意是z轴
</style>
<div class="box scaleZ">
	<div class="fill"></div>
</div>

2.1.4 scale3d

设置元素的 3D 缩放效果

语法：

transform: scale3d(x,y,z);
transform: scale3d(2,2,2);

参数：

x：表示水平方向的缩放倍数
y：表示垂直方向的缩放倍数
z：表示面向屏幕方向的缩放倍数

取值：

大于1表示放大
小于1表示缩小
不能为百分比

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        perspective: 800px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.scale3d:hover .fill {
		transform: scale3d(2, 2, 1);
	}
</style>
<div class="box scale3d">
	<div class="fill"></div>
</div>

2.2 3D 位移 translate3d

3D 移动在 2D 移动的基础上多加了一个可以移动的方向，就是z轴方向。

2.2.1 translateX

元素沿着 X 轴移动

语法：

transform: translateX(x);
transform: translateX(100px);

参数：

x：表示水平方向的移动

取值：

正值：向右
负值：向左

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        perspective: 800px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.translateX:hover .fill {
		transform: translateX(50px);
	}
</style>
<div class="box translateX">
	<div class="fill"></div>
</div>

2.2.2 translateY

元素沿着 Y 轴移动

语法：

transform: translateY(y);
transform: translateY(100px);

参数：

y：表示垂直方向的移动

取值：

正值：向下
负值：向上

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        perspective: 800px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.translateY:hover .fill {
		transform: translateY(50px);
	}
</style>
<div class="box translateY">
	<div class="fill"></div>
</div>

2.2.3 translateZ

元素沿着 Z 轴移动

语法：

transform: translateZ(z);
transform: translateZ(100px);

参数：

z：表示面向屏幕方向的移动

取值：

正值：向前
负值：向后

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        /* 父元素加透视效果 */
        perspective: 800px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.translateZ:hover .fill {
		transform: translateZ(200px);
	}
</style>
<div class="box translateZ">
	<div class="fill"></div>
</div>

如果不加透视属性，是看不到 translateZ 的效果的。

2.2.4 translate3d

元素进行 3D 移动

语法：

transform: translate3d(x,y,z);
transform: translate3d(100px,100px,100px);

参数：

x：表示水平方向的移动
y：表示垂直方向的移动
z：表示面向屏幕方向的移动

取值：

正值：向右、向下、向前
负值：向左、向上、向后

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
		/* 父元素加透视效果 */
		perspective: 800px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.translate3d:hover .fill {
		transform: translate3d(50px, 50px, 200px);
	}
</style>
<div class="box translate3d">
	<div class="fill"></div>
</div>

2.3 3D 旋转 rotate3d

3D旋转：3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转。

旋转的方向：（左⼿法则）左⼿握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余⼿指卷曲的方向。

注意：所有的3d旋转，对着正方向去看，都是顺时针旋转。

2.3.1 rotateX

元素沿着 X 轴旋转

语法：

transform: rotateX(a);
transform: rotateX(360deg);

参数：

a：角度，单位为deg

取值：

正值：顺时针旋转
负值：逆时针旋转

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        /* 父元素加透视效果 */
		perspective: 200px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.rotateX:hover .fill {
		transform: rotateX(45deg);
	}
</style>
<div class="box rotateX">
	<div class="fill"></div>
</div>

透视的是要加给图片的父元素 div，方能生效。我们在后面会讲解透视属性。

2.3.2 rotateY

元素沿着 Y 轴旋转

语法：

transform: rotateY(a);
transform: rotateY(360deg);

参数：

a：角度，单位为deg

取值：

正值：顺时针旋转
负值：逆时针旋转

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
		/* 父元素加透视效果 */
		perspective: 200px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.rotateY:hover .fill {
		transform: rotateY(45deg);
	}
</style>
<div class="box rotateY">
	<div class="fill"></div>
</div>

2.3.3 rotateZ

元素沿着 Z 轴旋转

语法：

transform: rotateZ(a);
transform: rotateZ(360deg);

参数：

a：角度，单位为deg

取值：

正值：顺时针旋转
负值：逆时针旋转

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
        /* 父元素加透视效果 */
		perspective: 200px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.rotateZ:hover .fill {
		transform: rotateZ(45deg);
	}
</style>
<div class="box rotateZ">
	<div class="fill"></div>
</div>

2.3.4 rotate3d（了解）

沿着自定义轴，元素 3D 旋转，综合写法

语法：

transform: rotate3d(1, 1, 1, 0);
transform: rotate3d(x, y, z, a)

取值：

x 可以是 0 到 1 之间的数值表示旋转轴X坐标方向的矢量。
y 可以是 0 到 1 之间的数值表示旋转轴Y坐标方向的矢量。
z 可以是 0 到 1 之间的数值表示旋转轴Z坐标方向的矢量。
a 表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。
perspective是透视距，写在父元素，以获得更好的3d效果，transition是过渡时间，transform是样式转换。

通过总结：发现rotate3d(20,0,0,45deg)，其实就是从原点指向(20,0,0)这个点构成一个方向轴，然后根据左手定则，四指指向方向为旋转方向，旋转45度。因此这样就很好解释了rotate3d（x,y,z,deg）属性，由原点指向(x,y,z)成方向轴，然后左手定则，确定旋转方向，进行相应的角度旋转，得到特效结果。注释： css3里的3d坐标轴：z轴垂直电脑屏幕指向你，y轴在电脑屏幕垂直朝下，x轴在电脑屏幕水平向右左手定则：类似物理当中的左手定则，大拇指指向旋转方向轴正方向，四指环绕紧握，四指指向为元素旋转方向旋转原点：一般指向元素正中心，当然你可以设定旋转元素上设置样式transform-origin进行相应更改

注意：

xyz是表示旋转轴的矢量
transform: rotate3d(1,0,0,45deg) 沿着X轴旋转45deg
transform: rotate3d(1,1,0,45deg) 沿着对角线旋转45deg

<style>
	.box {
		width: 100px;
		height: 100px;
		margin: 100px auto;
		background: #ddd;
		/* 父元素加透视效果 */
		perspective: 200px;
	}

	.box>.fill {
		height: 100px;
		background: #03A9F4;
		opacity: .5;
		transition: 0.3s;
	}

	.rotate3d1 .fill {
		transform: rotate3d(1, 1, 0, 45deg);
	}

    .rotate3d2 .fill {
		transform: rotate3d(-1, 1, 0, 45deg);
	}
</style>
<div class="box rotate3d1">
	<div class="fill"></div>
</div>
<div class="box rotate3d2">
	<div class="fill"></div>
</div>

2.3.5 3D 旋转

元素隐藏背面内容：backface-visibility: hidden;

   <style>
        .box {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            transition: all 2s;
            perspective: 3000px;

        }

        .box-item {
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 50%;
            overflow: hidden;
            transition: all 2s;
            /* 隐藏背面 */
            backface-visibility: hidden;
        }

        .box-item img {
            width: 100%;
            height: 100%;
        }

        .box1 {
            background: #ff0000
        }

        .box2 {
            background: #0000ff;
            transform: rotateY(180deg);
        }

        .box:hover .box1 {
            transform: rotateY(180deg);
        }

        .box:hover .box2 {
            transform: rotateY(0deg);
        }

        /* 
        父元素不旋转也可以
        .box:hover {
            transform: rotateY(180deg);
        } */
    </style>
</head>

<body>


    <div class="box">
        <div class="box-item box1">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1111%2F05161Q64001%2F1P516164001-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663408508&t=80d5d06842f814a7103654e492cc3262"
                alt="">
        </div>
        <div class="box-item box2">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1Z9121P3012E9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663408508&t=164de919cb116880a860bffcd3adf664"
                alt="">
        </div>
    </div>

  <style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            /* background-color: aqua; */
            margin: 100px auto;
            border-radius: 50%;
            transform-style: preserve-3d;
            perspective: 3000px;
        }

        .img-box {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            overflow: hidden;
            backface-visibility: hidden;
            transition: 1s;
        }

        img.img-box {
            width: 100%;

        }

        .img-box:nth-child(1) {
            transform: rotateY(180deg);
        }


        /* 第一个照片 从背景变为正面 */
        .box:hover .img-box:nth-child(1) {
            transform: rotateY(0deg);
        }

        /* 第2个照片 从背景变为正面 */
        .box:hover .img-box:nth-child(2) {
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">

        <img class="img-box"
            src="https://img1.baidu.com/it/u=3532777032,1509707485&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661014800&t=772304513a8a14fc356956a9e2514c6c"
            alt="">
        <img class="img-box"
            src="https://img2.baidu.com/it/u=300539959,1494334537&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661014800&t=72d65a0bc0a6ba41f4990a71f0db0021"
            alt="">

    </div>

2.4 透视 perspective

https://www.cnblogs.com/yanggeng/p/11285856.html

显示屏是⼀个 2D 平面，图像之所以具有立体感（3D 效果），其实只是⼀种视觉呈现（透视我们也称为视距），通过透视可以实现此目的。
透视可以将⼀个2D平面，在转换的过程当中，呈现 3D 效果。但仅仅只是视觉呈现出 3D 效果，并不是真正的3D。
简单来说，就是设置这个属性后，那么就可以模拟出像我们人看电脑上的显示的元素一样。比如说，perspective:800px; 意思就是，我在离屏幕 800px 的地方观看这个元素。（透视要写在被观察元素的父元素上面）
加了 perspective 和没有加是什么区别，第一个小方块，是有加的效果，能明显的看到空间感了有没有，感觉他是真的像在旋转，而第二个呢，像是在伸缩。

<style>
	.wrapper1 {
		/* 透视：加给变换的父盒子 */
		/* 设置的是用户的眼睛距离 平面的距离 */
		/* 透视效果只是视觉上的呈现，并不是正真的3d */
		perspective: 400px;
	}

	.box {
		width: 300px;
		height: 220px;
		margin: 100px auto 0;
		background: #ff0000;
		transition: all 2s;
	}

	.box:hover {
		transform: rotateY(180deg);
	}
</style>
<div class="wrapper1">
	<div class="box"></div>
</div>
<div class="wrapper2">
	<div class="box"></div>
</div>

透视图片效果：

<style>
	.wrapper {
		/* 父元素加透视效果 */
		perspective: 800px;
	}

	.box {
		width: 200px;
		margin: 200px auto;
		background: #ff0000;
		transform: translateZ(400px)
	}

	.box::after {
		content: '';
		display: block;
		clear: both;
	}

	.box>img {
		float: left;
		width: 100%;
	}

	.box:hover {
		/* translateZ 必须配合透视来使用 */
		/* transform: translateZ(400px) */
	}
</style>
<div class="wrapper">
	<div class="box"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0719%2Fa38e408fp00qwhqu10032d000go00b4p.png&thumbnail=650x2147483647&quality=80&type=jpg" alt=""></div>
</div>

关于透视三个问题：

translateZ 的值越大，是否图片越大，translateZ 的值越小，是否图片越小？
translateZ 的值为负值，增加 perspective 图片是否会变小？
translateZ 为 0，调整 perspective 图片是否会变大变小？

第一个问题：translateZ 的值越大，是否图片越大？

比如之前学到的属性值：transform: translateZ(400px); 增加 Z 轴的距离，那么 Z 轴越大，是不是也就代表着，这个元素，离我们的距离越近？

那么，你把一张图片，贴到你脸上，有什么效果？是不是非常大？这个 perspective 配合 transform：translateZ 就有这种效果。

这个其实很像我们现实中的例子一样，一张远处的图片，慢慢的移动到你脸上，你会看见图片越来越大，贴到你脸上的时候，是不是你就看不见了？

到 800px 的时候，你人都和图片融合在一体了，如果 801px 是不是你都穿过这张图片了？道理是一样的。

第二个问题：translateZ 的值为负值，增加 perspective 图片是否会变小？

把 translateZ 设置成负值（按照我们的想法，Z 的值是正数，说明这个图片，离我们越近，那么反之，负值，离我们越远），修改 perspective 的值，把他的值变小（按正常来说，值越小，是不是就代表我们离屏幕越近，看的东西也就越大）。

结果是 perspective 值越小，图片越小，怎么图片不是越来越大呢？我们离屏幕越近，图片应该越大才对啊，怎么变小了呢？

第三个问题：translateZ 为 0，调整 perspective 图片是否会变大变小？

按正常来说 perspective 值越小，是不是我们就离屏幕越近，那么图片也会越大（translateZ 是移动图片，perspective 是移动人和屏幕的距离，那么把 translateZ 归零，然后调整 perspective。）

结果是 perspective 好像无论是增加，还是减少，图片都没有任何变化。

为什么会出现这种问题呢？

实际情况是，我们看到的，并不是图片本身，而是图片的投影，投影是什么鬼，下面我们详细看。

我们下面分析总结一下各种情况：

第一个情况，translateZ 的值越大，图片越大。

translateZ 的值越大，代表图片越远离屏幕，那么相对于屏幕上的投影也就越大。

第二个情况，translateZ 的值越小，图片越小。

translateZ 的值越小，也就是负值的情况，图片会跑出屏幕，那么屏幕上的图片的倒影，也就越小。

第三个情况，translateZ 为 0 的时候，调整 perspective 的值，图片的大小没有改变

translateZ 为 0 的时候，图片不会移动，也就不会有投影了。

第四个情况，为什么 translateZ 为负数之后，减少 perspective 的值后，图片不是变大，反而变小呢？

translateZ 为负数之后，人眼离得越近看的倒影越小。

注意：

perspective 属性需要加在父元素上。
perspective-origin 透视点，这个属性也是设置在父级身上。
- 默认值是 center center，也就是居中。
- 这两个参数呢，是根据自身来定位的， 0px 0px 代表着元素的左上角，center center 代表着元素的中间点。
- 可以设置像素 50px，也可设置百分比 50%，还可以设置 top right left bottom center 等。
- 这个属性是相当于人的眼睛看哪里。你没有设置，也就是默认看父元素中间的地方。

3 练习

使用 2D 位移实现上下左右居中。
使用 2D 缩放实现 hover 放大效果。
使用 2D 旋转实现扑克牌效果。
使用 3D 转换实现翻转的照片。

使用 3D 转换实现立方体。

梓旭梓旭

THE END

二维码

git上传本地文件到码云gitee

< <上一篇

flex布局

下一篇>>

文章目录

关闭

搜索内容

1 2D 转换

1 2D 转换

1.1移动 translate

1.2旋转 rotate

1.2.1 transform-origin 转换中心点

1.3 缩放 scale

1.4 倾斜 skew（了解）

1.5 2D 转换总结

transform的简写

2 3D 转换

2.1 3D 缩放 scale3d

2.1.1 scaleX

2.1.2 scaleY

2.1.3 scaleZ

2.1.4 scale3d

2.2 3D 位移 translate3d

2.2.1 translateX

2.2.2 translateY

2.2.3 translateZ

2.2.4 translate3d

2.3 3D 旋转 rotate3d

2.3.1 rotateX

2.3.2 rotateY

2.3.3 rotateZ

2.3.4 rotate3d（了解）

2.3.5 3D 旋转

2.4 透视 perspective

3 练习

取消回复

共有 0 条评论

热门文章

分类