CSS3 中 3D 变换效果概述

最新推荐文章于 2024-06-26 14:03:25 发布

Peter_one

最新推荐文章于 2024-06-26 14:03:25 发布

阅读量928

点赞数

分类专栏： css3 文章标签： css3 3d transform 变换

本文链接：https://blog.csdn.net/zp511253886/article/details/53056876

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.transform-style 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化

取值：flat | preserve-3d

flat：默认值，指定子元素位于此元素所在平面内
preserve-3d：指定子元素定位在三维空间内

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>transform-style</title>
<style>
  body {
    perspective: 1000px;
  }
  .cube {
    position: relative;
    font-size: 80px;
    width: 2em;
    margin: 1.5em auto;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(30deg);
  }
  .cube > div {
    position: absolute;
    width: 2em;
    height: 2em;
    background: rgba(0, 0, 0, .3);
    border: 1px solid #999;
    color: white;
    text-align: center;
    line-height: 2em;
  }
  .front {
    transform: translateZ(1em);
  }
  .top {
    transform: rotateX(90deg) translateZ(1em);
  }
  .right {
    transform: rotateY(90deg) translateZ(1em);
  }
  .left {
    transform: rotateY(-90deg) translateZ(1em);
  }
  .bottom {
    transform: rotateX(-90deg) translateZ(1em);
  }
  .back {
    transform: rotateY(-180deg) translateZ(1em);
  }
</style>
</head>
<body>
  <div class="cube">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
  </div>
</body>
</html>

示例代码效果截图：

2.perspective 指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果

「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。当该属性值为「非none」时，元素将会创建局部堆叠上下文。

取值：none | <length>

none：不指定透视
<length>：指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值

3.perspective-origin 指定透视点的位置

该属性提供2个参数值。如果提供两个，第一个用于横坐标，第二个用于纵坐标。如果只提供一个，该值将用于横坐标；纵坐标将默认为center。

（1）<percentage>：用百分比指定透视点坐标值，相对于元素宽度。可以为负值。

（2）<length>：用长度值指定透视点坐标值。可以为负值。

left：指定透视点的横坐标为left
center：指定透视点的横坐标为center
right：指定透视点的横坐标为right
top：指定透视点的纵坐标为top
center：指定透视点的纵坐标为center
bottom：指定透视点的纵坐标为bottom

4.backface-visibility 指定元素背面面向用户时是否可见

取值：visible | hidden

决定一个元素背面面向用户时是否可见，需要直接在该元素上定义 <' backface-visibility '> 属性，而不能在其父元素上，因为该属性默认为不可继承。

visible：指定元素背面可见，允许显示正面的镜像
hidden：指定元素背面不可见

示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>backface-visibility</title>
  <style>
    body {
      perspective: 800px;
      perspective-origin: 50%;
    }
    .wrapper{
      width: 500px;
      margin:30px auto 0;
    }
    .cube {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 50px;
      transform-style: preserve-3d;
      animation: rotate 5s infinite;
    }
    .cube > div {
      position: absolute;
      width: 100%;
      height: 100%;
      border:1px #ff0 solid;
      background-color: rgba(0, 0, 0, .3);
      color: gray;
      font-size: 40px;
      line-height: 100px;
      text-align: center;
      color: #ff0;
      font-family: Arial;
    }
    .front {
      transform: translatez(50px);
    }
    .back {
      transform: rotatey(180deg) translatez(50px);
    }
    .right {
      transform: rotatey(90deg) translatez(50px);
    }
    .left {
      transform: rotatey(-90deg) translatez(50px);
    }
    .top {
      transform: rotatex(90deg) translatez(50px);
    }
    .bottom {
      transform: rotatex(-90deg) translatez(50px);
    }
    @keyframes rotate {
      from {
        transform: rotatey(0);
      }
      to {
        transform: rotatey(360deg);
      }
    }
    .c1 > div {
      backface-visibility: visible;
    }
    .c2 > div {
      backface-visibility: hidden;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="cube c1">
      <div class="front">1</div>
      <div class="back">2</div>
      <div class="right">3</div>
      <div class="left">4</div>
      <div class="top">5</div>
      <div class="bottom">6</div>
    </div>

    <div class="cube c2">
      <div class="front">1</div>
      <div class="back">2</div>
      <div class="right">3</div>
      <div class="left">4</div>
      <div class="top">5</div>
      <div class="bottom">6</div>
    </div>
  </div>
</body>
</html>

示例代码效果截图：

Peter_one

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 中 3D 变换效果概述

1.transform-style 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化取值：flat | preserve-3dflat：默认值，指定子元素位于此元素所在平面内preserve-3d：指定子元素定位在三维空间内示例代码：html>head>meta charset="utf-8" />title>transform-s
复制链接

扫一扫

专栏目录