CSS3(十五) CSS3 3D效果基础版本

CSS3

发布日期: 2020-05-10

更新日期: 2020-05-24

文章字数: 531

阅读时长: 2 分

阅读次数:

3D 变换,3 个属性

transform-style: prevserve-3d ;建立 3D 空间，必须是父元素,运动的元素没法建立
perspective:数字景深
perspective-origin 景深基点: 视线是从哪个方向看过去的
transform : 新增函数
- rotateX() 旋转 X 轴类似单杠
- rotateY() 旋转 Y 轴类似钢管舞
- rotateZ() 旋转 Z 轴类似水平翻转
- translateZ() 位移 Z 轴，简单来说就是近大远小
- scaleZ() 放大

这里特别提醒用了 3D 空间必须加相对定位

围绕 X 轴旋转

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>3D旋转</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    h1 {
      margin: 10px auto;
      position: absolute;
      left: 50%;
      top: 0px;
      -webkit-transform: translate(-50%, 0);
    }
    div {
      width: 100px;
      height: 100px;
      padding: 100px;
      border: 10px solid black;
      -webkit-perspective: 50px;
      -webkit-transform-style: preserve-3d;
    }
    p {
      width: 100px;
      height: 100px;
      background: red;
      transition: 2s;
    }
    div:hover p {
      -webkit-transform: rotateX(180deg);
    }
  </style>
  <body>
    <h1>鼠标放到框子上面就会变形</h1>
    <div>
      <p></p>
    </div>
  </body>
</html>

绕 Y 轴旋转

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>绕Y轴旋转</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    div {
      width: 100px;
      height: 100px;
      padding: 100px;
      border: 10px solid blanchedalmond;
      -webkit-transform-style: preserve-3d;
      -webkit-perspective: 100px;
      margin: 0 auto;
    }
    p {
      width: 100px;
      height: 100px;
      background: red;
      transition: 2s;
      line-height: 100px;
      text-align: center;
    }
    p span {
      transition: 1s;
    }
    div:hover p {
      -webkit-transform: rotateY(180deg);
    }
    div:hover p span {
      -webkit-transform: rotateY(-180deg);
      display: block;
    }
  </style>
  <body>
    <div>
      <p>
        <span>2</span>
      </p>
    </div>
    <!--小提示要是里面的文字不转的话可以给里面的文字设定一个包裹层这样也旋转了-->
  </body>
</html>

绕 Z 轴旋转

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>TranslateZ</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    div {
      width: 100px;
      height: 100px;
      padding: 100px;
      margin: 0 auto;
      border: 10px solid #ccc;
      -webkit-perspective: 100px;
      -webkit-transform-style: preserve-3d;
    }
    p {
      width: 100px;
      height: 100px;
      background: red;
      transition: 2s;
    }
    div:hover p {
      -webkit-transform: translateZ(-100px);
    }
  </style>
  <body>
    <div>
      <p>
        1
      </p>
    </div>
  </body>
</html>