前端CSS3详细教程-04

leeming
227 阅读6分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一、3D转换

1、3D 的特点

  • 近大远小

image-20201120014408459.png

2、三维坐标系

  • x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值

  • y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值

  • z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值

image-20201120010754663.png

3、3D 转换内容

  • 3D透视：

    • perspctive

  • 3D呈现 :

    • transform-style

  • 3D 位移：

    • translate3d(x, y, z)

  • 3D 旋转：

    • rotateX()
    • rotateY()
    • rotateZ()
    • rotate3d(x, y, z)

二、透视

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

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

  • 语法：

     perspective : 1000px;  

    • 透视也称为视距，指人的眼睛到屏幕的距离

    • 透视的单位是像素(px)，取值近大远小，值越小距元素越近，值越大距离元素越远

    • 注意下方图片

      • d：就是视距，视距就是指人的眼睛到屏幕的距离

    • z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大

image-20201120010944530.png

-   需要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);
}

image-20201120040103360.png

三、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);
}

image-20201120032540102.png

四、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 轴 或者自定义轴进行旋转

  1. 语法

    • 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

  2. 代码案例

    div {
  perspective: 300px;
}
​
img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}
​
img:hover {
  transform: rotateX(-45deg)
}

  1. 左手准则

    • 左手的手拇指指向 x 轴的正方向

    • 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

image-20201120041951105.png

-   左手的拇指指向 y 轴的正方向

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

image-20201120042318025.png

六、3D缩放

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

  1. 语法

    • transform: scaleX(0.5) -- 沿着 x 轴缩放

    • transform: scaleY(0.5) -- 沿着 y 轴缩放

    • transform: scaleZ(0.5) -- 沿着 z 轴缩放

      • 单独使用没有作用，需要结合其它属性一起使用。比如：transform: scaleZ(0.5) rotateX(45deg);

    • transform: scale3d3d(x, y, z) -- 沿着自定义轴缩放

七、反面可见性

定义元素在不面对屏幕时是否可见

  • 语法：

     backface-visibility: visible | hidden;

  • 案例：卡牌两面翻转

    <--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:first-child {
    z-index: 1;
    backface-visibility: hidden;
}
​
img:last-child {
    transform: rotateY(180deg);
}
​
.wrap:hover {
    transform: rotateY(180deg);
}

八、立方体

image-20201120054056965.png

<--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 {
    width: 300px;
    height: 300px;
    margin: 200px auto;
    perspective: 1000px;
}
​
.wrap {
    position: relative;
    height: 300px;
    transform-style: preserve-3d;
    animation: move 3s linear infinite;
}
​
.wrap:hover {
    animation-play-state: paused;
}
​
img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
}
/* 前 */
​
img:nth-of-type(1) {
    transform: translateZ(150px);
}
/* 后 */
​
img:nth-of-type(2) {
    transform: rotateY(180deg) translateZ(150px);
}
/* 左 */
​
img:nth-of-type(3) {
    transform: rotateY(-90deg) translateZ(150px);
}
/* 右 */
​
img:nth-of-type(4) {
    transform: rotateY(90deg) translateZ(150px);
}
/* 上 */
​
img:nth-of-type(5) {
    transform: rotateX(90deg) translateZ(150px);
}
/* 下 */
​
img:nth-of-type(6) {
    transform: rotateX(-90deg) translateZ(150px);
}
​
@keyframes move {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

九、视线灭点

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

  • 语法：
perspective-origin : x y;

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

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

    值描述
    x定义该视图在 x 轴上的位置。默认值：50%。可能的值：leftcenterrightlength%
    y定义该视图在 y 轴上的位置。默认值：50%。可能的值：topcenterbottomlength%

十、旋转木马

image-20201120062739980.png

<--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 {
    width: 300px;
    height: 300px;
    margin: 300px auto;
    perspective: 1000px;
}
​
.wrap {
    position: relative;
    height: 300px;
    transform-style: preserve-3d;
    animation: move 5s linear infinite;
}
​
.wrap:hover {
    animation-play-state: paused;
}
​
img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    transition: all 3s;
}
​
@keyframes move {
    0% {
        transform: rotateX(10deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(10deg) rotateY(360deg);
    }
}

/*JS部分*/
window.onload = function() {
    document.querySelectorAll("img").forEach(function(item, index) {
        item.style.transform = "rotateY(" + index * 60 + "deg) translateZ(300px)";
    })
}
avatar
文章
阅读
粉丝