前端之CSS3知识整理2

最新推荐文章于 2022-04-14 22:40:37 发布

云中自有锦书

最新推荐文章于 2022-04-14 22:40:37 发布

阅读量408

点赞数

分类专栏： CSS 文章标签： CSS3

本文链接：https://blog.csdn.net/weixin_41282726/article/details/96359293

版权

1. 3D转换

transform:不仅可以2D转换，还可以进行3D转换

1.1 坐标轴

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的

1.2 perspective透视

电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。

说白了，设置了perspective属性后，就有了进大远小的效果了，在视觉上，让我们能看出来3d的效果。

注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

需要添加透视：perspective

1.)添加给父盒子, 让子盒子拥有近大远小的透视效果

2. )1000px 指的是观察者到盒子的距离

1.3 rotate旋转

左手定则:

伸出左手握拳, 心中自有三根轴,

大拇指指向轴的正方向, 手指头卷曲的方向, 就是旋转的正方向

transform: rotate(45deg);// 让元素在平面2D中旋转
transform: rotateX(45deg);// 让元素沿着X轴转45度
transform: rotateY(45deg);// 让元素沿着Y轴转45度
transform: rotateZ(45deg);// 让元素沿着Z轴转45度

1.4 translate平移

/*沿着X轴的正方向移动45px*/
transform: translateX(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateY(45px);
/*沿着Z轴的正方向移动45px*/
transform: translateZ(45px);

 <style>
    body {
      perspective: 1000px;
    }
    img {
      display: block;
      margin: 100px auto;
      transition: all 4s;
    }
    img:hover {
      /*transform: translateX(-100px);*/
      /*transform: translateY(-100px);*/
      transform: translateZ(-500px);
    }
  </style>

1.5 transform-style

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。

flat:默认值，2d显示
preserve-3d: 3d显示

transform-style与perspective的区别：

/*透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具，*/
/*preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。 */

//一个3d元素可以没有perspective，但是不能没有transform-style

/立方体效果/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      position: relative;

      /* 真 3 d */
      transform-style: preserve-3d;
      transition: all 20s;

      /* 只是用于辅助布局的, 布局完成可以拿掉 */
      /*perspective: 1000px;*/
    }

    ul:hover {
      transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }

    li {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 1s;
    }

    /* 前面 */
    li:nth-child(1) {
      background-color: pink;
      transform: translateZ(100px);
    }
    /* 上面 */
    li:nth-child(2) {
      background-color: green;
      transform: rotateX(90deg) translateZ(100px);
    }
    /* 后面 */
    li:nth-child(3) {
      background-color: orange;
      transform: rotateX(180deg) translateZ(100px);
    }
    /* 下面 */
    li:nth-child(4) {
      background-color: brown;
      transform: rotateX(270deg) translateZ(100px);
    }
    /* 左面 */
    li:nth-child(5) {
      background-color: lime;
      transform: rotateY(-90deg) translateZ(100px);
    }
    /* 右面 */
    li:nth-child(6) {
      background-color: blue;
      transform: rotateY(90deg) translateZ(100px);
    }

    /* 炸开的效果 */
    ul:hover li:nth-child(1) {
      transform: translateZ(200px);
    }
    ul:hover li:nth-child(2) {
      transform: rotateX(90deg) translateZ(200px);
    }
    ul:hover li:nth-child(3) {
      transform: rotateX(180deg) translateZ(200px);
    }
    ul:hover li:nth-child(4) {
      transform: rotateX(270deg) translateZ(200px);
    }
    ul:hover li:nth-child(5) {
      transform: rotateY(-90deg) translateZ(200px);
    }
    ul:hover li:nth-child(6) {
      transform: rotateY(90deg) translateZ(200px);
    }
  </style>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  &

最低0.47元/天解锁文章

云中自有锦书

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端之CSS3知识整理2

1. 3D转换transform:不仅可以2D转换，还可以进行3D转换1.1 坐标轴用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的1.2 perspective透视电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。说白了，设置了perspective属性后，就有了进大...
复制链接

扫一扫