CSS3_04

2023-12-21 16:38:40

CSS3-04

一、3D转换

1、`3D` 的特点

近大远小

2、三维坐标系

x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值

3、`3D` 转换内容

3D透视：
- perspctive
3D呈现 :
- transform-style
3D 位移：
- translateZ()
- translate3d(x, y, z)
3D 旋转：
- rotateX()
- rotateY()
- rotateZ()
- rotate3d(x, y, z)

二、透视

如果想要在网页上产生3D效果必须要用到透视，利用透视可以将3D物体投影到2D平面上

透视用来定义3D元素的透视效果 (景深、视角、视距)，（或者可以理解为：设置从何处查看一个元素）

语法：
```
 perspective : 1000px;  
```
- 透视也称为视距，指人的眼睛到屏幕的距离
- 透视的单位是像素(px)，取值近大远小，值越小距元素越近，值越大距离元素越远
- 注意下方图片
  - d：就是视距，视距就是指人的眼睛到屏幕的距离
- z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大

需要3D变换的元素一定要在外面套一个父元素，在父元素上设置perspective属性。
也可以给元素本身设置： transform: perspective(500px) ;
- 区别：
  给父元素：子元素有共同的视角。
  给子元素，各个子元素有自已的视角。

代码演示

<--html部分-->
<div class="box1">
    <div class="wrap">
        <img src="images/b1.jpg" alt="">
        <img src="images/b1.jpg" alt="">
        <img src="images/b1.jpg" alt="">
        <img src="images/b1.jpg" alt="">
        <img src="images/b1.jpg" alt="">

    </div>
</div>
<div class="box2">
    <div class="wrap">
        <img src="images/b1.jpg" alt="">
        <img src="images/b1.jpg" alt="">
        <img src="images/b1.jpg" alt="">
        <img src="images/b1.jpg" alt="">
        <img src="images/b1.jpg" alt="">
    </div>
</div>

/*css部分*/
.box1,
.box2 {
    width: 1300px;
    margin: 100px auto;
}

.box1 {
    perspective: 500px;
}

.wrap {
    transform-style: preserve-3d;
}

img {
    width: 200px;
}

.box1 img {
    transform: rotateY(45deg);
}

.box2 img {
    transform: perspective(500px) rotateY(45deg);
}

三、3D呈现

语法：
```
transform-style: flat | preserve-3d 
```
- 指定在父元素3D变换时，子元素如何在3D空间中呈现，
- 可选项：preserve-3D | flat (2d效果，默认)
- 需要设置在3D变换的父元素中，并且高于任何嵌套的变形元素。
- 如果你的父元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden;

代码展示

<--html部分-->
<div class="box1">
    <div class="wrap">
        <img src="images/b1.jpg" alt="">
    </div>
</div>
<div class="box2">
     <div class="wrap">
         <img src="images/b1.jpg" alt="">
     </div>
</div>

/*css部分*/
.box1,
.box2 {
    width: 300px;
    height: 200px;
    margin: 200px auto;
    perspective: 500px;
}

.wrap {
    width: 300px;
    height: 200px;
    background: url(images/w.jpg) no-repeat;
}

.box1 .wrap {
    transform-style: preserve-3d;
}

.box2 .wrap {
    transform-style: flat;
}

img {
    width: 300px;
    height: 200px;
    transform: rotateY(-45deg);
}

四、3D 移动

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

语法：

/* 仅仅是在 x 轴上移动 */
transform: translateX(100px)
/* 仅仅是在 y 轴上移动 */
transform: translateY(100px)
/* 仅仅是在 z 轴上移动 */
transform: translateZ(100px)
/* 在x、y、 z 轴上移动 */
transform: translate3d(x, y, z)

五、3D旋转

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

语法
- transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
- transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
- transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
- transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度
  - x, y, z 表示旋转轴的矢量，取值0或1，标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
    - transform: rotate3d(1, 1, 0, 45deg) – 沿着对角线旋转 45deg
    - transform: rotate3d(1, 0, 0, 45deg) – 沿着 x 轴旋转 45deg

代码案例

div {
  perspective: 300px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateX(-45deg)
}

左手准则
- 左手的手拇指指向 x 轴的正方向
- 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

左手的拇指指向 y 轴的正方向
其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

案例：卡牌翻转

<--html部分-->
<div class="box">
     <div class="wrap">
         <img src="images/b1.jpg" alt="">
         <img src="images/b2.jpg" alt="">
     </div>
</div>

/*css部分*/
.box,
.warp {
    width: 300px;
    height: 200px;
}

.box {
    margin: 200px auto;
    perspective: 500px;
}

.wrap {
    position: relative;
    transform-style: preserve-3d;
    transition: all 2s;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
}

img:last-child {
    transform: rotateY(180deg);
}

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

案例：立方体

<--html部分-->
<div class="box">
    <div class="wrap">
        <img src="images/s1.jpg" alt="">
        <img src="images/s2.jpg" alt="">
        <img src="images/s3.jpg" alt="">
        <img src="images/s4.jpg" alt="">
        <img src="images/s5.jpg" alt="">
        <img src="images/s6.jpg" alt="">
    </div>
</div>


/*css部分*/
.box,
.warp {
    width: 300px;
    height: 300px;
}

.box {
    margin: 200px auto;
    perspective: 1000px;
}

.wrap {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: turn 2s linear infinite;
    transform-origin: center center -150px;
}

.wrap:hover{
    animation-play-state: paused;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: .8;

}
img:nth-child(2){
    transform-origin:right;
    transform: translateX(-300px) rotateY(-90deg) ;
}

img:nth-child(3){
    transform-origin:left;
    transform: translateX(300px) rotateY(90deg);
}

img:nth-child(4){
    transform-origin:bottom ;
    transform: translateY(-300px) rotateX(90deg);
}

img:nth-child(5){
    transform-origin:top ;
    transform: translateY(300px) rotateX(-90deg);
}

img:last-child {
    transform: translateZ(-300px) rotateY(180deg);
}

@keyframes turn{
    from{
        transform: rotate3d(1,1,0,0deg);
    }

    to{
        transform: rotate3d(1,1,0,360deg);
    }
}

六、3D缩放

CSS3新增了一系列制作动画的属性，其中有一个用于设置对象（如 div、ul li、文字等）大小缩放的属性scale。scale可在 X、Y 和 Z轴缩放，对应的属性分别为 scalex、scaley 和 scalez；同时设置在 X、Y 与 Z 轴的值就是对象在三维空间缩放。

语法
- transform: scaleX(0.5) – 沿着 x 轴缩放
- transform: scaleY(0.5) – 沿着 y 轴缩放
- transform: scaleZ(0.5) – 沿着 z 轴缩放
  - 单独使用没有作用，需要结合其它属性一起使用。比如：transform: scaleZ(0.5) rotateX(45deg);
- transform: scale3d(1, 0.5, 2) – 沿着自定义轴缩放

七、反面可见性

隐藏被旋转的元素的背面

语法：

 backface-visibility: visible | hidden;

八、视线灭点

定义视线灭点位置(即视线消失的位置）

语法：

perspective-origin : x y;

作用：改变视图角度（可理解为视线的方向），影响三维效果呈现。

默认为元素中心位置，必须和perspective一起结合使用

值	描述
x	定义该视图在 x 轴上的位置。默认值：50%。可能的值：left \| center \| right\| length \| %
y	定义该视图在 y 轴上的位置。默认值：50%。可能的值：top \| center \| bottom \| length\| %

码农公寓

CSS3_04

CSS3-04

一、3D转换

1、`3D` 的特点

2、三维坐标系

3、`3D` 转换内容

二、透视

三、3D呈现

四、3D 移动

五、3D旋转

案例：卡牌翻转

案例：立方体

六、3D缩放

七、反面可见性

八、视线灭点

思考：旋转木马

码农公寓

CSS3-04

一、3D转换

1、3D 的特点

2、三维坐标系

3、3D 转换内容

二、透视

三、3D呈现

四、3D 移动

五、3D旋转

案例：卡牌翻转

案例：立方体

六、3D缩放

七、反面可见性

八、视线灭点

思考：旋转木马

相关文章

1、`3D` 的特点

3、`3D` 转换内容