css3 3d转换

Posted 前端小白学习

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 3d转换相关的知识,希望对你有一定的参考价值。

3d转换

    如果想要元素具备3d效果,则需要使其父元素变成一个3d空间

      parent {

        transform-style: preserve-3d;

        perspective: 500px;  // 视距

      }

      

    设置的perspective的值不会影响元素的初始的大小,但是会影响3d变化时的一个状态

      但是会影响,元素改变后的状态


简单案例

div { width: 100px; height: 100px; background: #000; margin: 0 auto;}body { transform-style: preserve-3d; perspective: 400px;}.box{ transform: rotateX(45deg);}
<div></div><div class="box"></div>

页面效果

另一个

.box { width: 100px; height: 100px; position: relative; margin: 100px auto; transform-style: preserve-3d; perspective: 200px;}.item { width: 100px; height: 100px; position: absolute; top: 0; left: 0; text-align: center; line-height: 100px; font-size: 36px; color: #fff; background: rgba(0,0,0,.3);}.item:first-child { transform: translate3d(0, 0, -50px); text-align: left;}.item:last-child { transform: translate3d(0, 0, 50px);  text-align: right;}
<div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div></div>

页面效果

css3 3d转换

translate3d

    transform: translate3d(x, y, z)


    transform: translateX()

        translateY()

        translateZ()


    平时如果想要使用平移效果,那么尽量使用transform: translate3d()


    因为translate3d会强制开启GPU渲染。性能比2d的更好

    translate3d(x, y, z)


rotate3d

    rotateX

    rotateY

    rotateZ

    和rotate效果相同

    rotate3d(x, y, z, deg)

        x y z为三个矢量,矢量方向为对应坐标轴方向

        如果xyz为正值则是正方向

        如果xyz为负值则是负方向


        三个方向上的三个值可以确定一条合成的方向


        以该方向为一条线 让元素在这条线上进行旋转对应的角度


例子

body { transform-style: preserve-3d; perspective: 400px;}div { width: 100px; height: 100px; background: black; margin: 100px auto; transform: rotate3d(1, 1, 1, 45deg);}html<div></div>

页面效果

css3 3d转换

scale3d

    scale3d(x, y, z)


如果多个元素(祖先后代)都需要是3d效果,则都需要添加

transform-style: preserve-3d;


但是只需要给最上层元素添加视距


灭点位置 perspective-origin

    当景物离自己的位置越远时,就会越趋于集中到某一个点上。这个点就是灭点


比如,一条笔直的公路,你的视线看过去公路胡越来越细

来源百度图片


实现一个立方体

代码实现

body { transform-style: preserve-3d; perspective: 500px; /* 调整灭点位置 */  perspective-origin: center center; }.box { width: 200px; height: 200px; margin: 200px auto; position: relative; transform-style: preserve-3d; animation: rotate 10s linear; /* transform-origin: left center -100px; */ /* transform: scaleZ(2) */}.item { position: absolute; top: 0; left: 0; width: 200px; height: 200px;  backgroundrgba(0,0,0,.3); color: #fff; font-size: 72px; text-align: center; line-height: 200px; box-sizing: border-box; border: 1px solid #000;.item1 { transform: rotateX(90deg) translateZ(100px);  /* x轴向上旋转90度 ,z轴正方向移动100px*/}.item2 { transform: rotateX(-90deg) translateZ(100px);} .item3 { transform: rotateY(-90deg) translateZ(100px);}.item4 { transform: rotateY(90deg) translateZ(100px);}.item5 { transform: translateZ(100px);}.item6 { transform: rotateY(180deg) translateZ(100px); }@keyframes rotate { 100% {    transformrotate3d(-1,1,1,360deg); }}

<div class="box"> <div class="item item1">上</div> <div class="item item2">下</div> <div class="item item3">左</div> <div class="item item4">右</div> <div class="item item5">前</div> <div class="item item6">后</div></div>

页面展示


看不懂的强烈推荐看下张鑫旭的css3 3d转换,很清楚


以上是关于css3 3d转换的主要内容,如果未能解决你的问题,请参考以下文章

CSS3 使用 JavaScript 拖动转换 3d 变换

css CSS3,3d转换

03-css3D转换

Css3之高级-5 Css转换(简介2D转换3D转换)

CSS3动画2D3D转换

CSS3 2D/3D转换手把手教你