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轴:垂直屏幕,注意: 往外面是正值,往里面是负值

img

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 的值越大,图片越大。

img

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

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

img

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

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

img

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

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

img

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

注意:

  • perspective 属性需要加在父元素上。

  • perspective-origin 透视点,这个属性也是设置在父级身上。

    • 默认值是 center center,也就是居中。

    • 这两个参数呢,是根据自身来定位的, 0px 0px 代表着元素的左上角,center center 代表着元素的中间点。

    • 可以设置像素 50px,也可设置百分比 50%,还可以设置 top right left bottom center 等。

    • 这个属性是相当于人的眼睛看哪里。你没有设置,也就是默认看父元素中间的地方。

3 练习

  • 使用 2D 位移实现上下左右居中。

  • 使用 2D 缩放实现 hover 放大效果。

  • 使用 2D 旋转实现扑克牌效果。

  • 使用 3D 转换实现翻转的照片。

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