024 3D

最新推荐文章于 2024-05-21 13:40:31 发布

Manta__

最新推荐文章于 2024-05-21 13:40:31 发布

阅读量225

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Manta__/article/details/104941470

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

3D变形
在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外
在这里插入图片描述

3D平移
transform: translateZ(length)是3D Transformaton特有的，其他两个2D中就有
translateZ它不能是百分比值;那样的移动是没有意义的。
transform: translate3d( translateX, ,translateY, translateZ);

3D缩放
transform: scaleZ(number)
transform: scale3d(scaleX,scaleY,scaleZ);
如果只设置scaleZ(number),你会发现元素并没有被扩大或压缩，scaleZ(number)需要和translateZ(length)配合使用，number乘以length得到的值，是元素沿Z轴移动的距离，从而使得感觉被扩大或压缩

transform: translateZ(100px) scaleZ(2);
/*transform: scaleZ(2) translateZ(100px);相当于写法 transform: translateZ(200px); */

3D旋转
CSS3中的3D旋转主要包括四个功能函数
rotateX(angle)、rotateY(angle)、rotateZ(angle)、等价于rotate(angle)
rotate3d(x,y,z,angle)
x, y, z分别接受一个数值(number),用来计算矢量方向(direction vector)，矢量方向是三维空间中的一条线, 从坐标系原点到x, y, z值确定的那个点，元素围绕这条线旋转angle指定的值

景深:
简单的理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在我们CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深）
构建3D舞台，决定用户的肉眼距高屏幕的水平距离!使3D变换的元素具有近大远小的感觉
景深是一个不可继承属性，但他可以作用于所有的后代元素（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖
原理：
景深越大灭点越远元素变形更小
景深越小灭点越近元素变形更大
景深基点视角的位置，perspective-origin:50% 50%;（默认值）
景深叠加尽量避免景深叠加
transform: perspective(depth);
depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值
若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略
perspective: depth;
同perspective()函数一样，depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。他们唯一的区别是，perspective属性是被用于元素的后代元素，而不是元素本身；就是说，为某个元素设置perspective属性后，是对这个元素的子元素起作用，而不是这个元素本身。
perspective-origin
同perspective属性，也是设置在父元素上，对后代元素起作用。这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置的

灭点
指的是立体图形备枭边的延伸线所产生的相交点。透视点的消失点
在这里插入图片描述
transform-style
这个属性指定了子元素如何在空间中展示，构建3D舞台，使3d舞台有层次感，只有两个属性值：flat（默认）和preserve-3d
-flat 表示所有子元素在2D平面呈现，
-preserve-3d 表示所有子元素在3D平面呈现，

transform-style是一个不可继承属性，他只作用于子元素
如果被扁平化，则子元素不会独立的存在于三维空间。
因为该属性不会被（自动）继承，所以必须为元素所有非叶后代节点设置该属性。

backface-visibility
属性用来设置，是否显示元素的背面，默认是显示的。
backface-visibility: keyword;
keyword有两个值，hidden和visible，默认值是visible。
一个元素分两面，但并不意味元素有厚度。在-个状态下，元素只能展现自己的一面

正方体
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   *{
    padding: 0;
    margin: 0;
   }
   #wrap{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    /* padding: 0; */
    margin: auto;
    width: 300px;
    height:300px;
    border: 1px solid black;
    background-color: black;/* 不能加颜色 ,加颜色不能3d*/
    
    perspective: 200px;
    /* transform-style: preserve-3d; */
   }
   #wrap>.box{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    /* padding: 0; */
    margin: auto;
    width: 100px;
    height:100px;
    /* border: 1px solid black; */
    /* background-color: #bfa; */
    
    transition:3s ;
    transform-style: preserve-3d;
    transform-origin: center center -50px;
   }
   .box>div{
    position: absolute;
    
    width: 100%;
    height: 100%;
    /* background: #bfa; */
    background: rgba(123,321,333,.3);/* 透明 */
    text-align: center;
    font: 50px/100px "微软雅黑";
    
    backface-visibility: hidden;
   }
   
   #wrap > .box > div:nth-child(6){
    transform-origin: top;/* 基点变换 */
    transform: rotateX(-90deg);
    bottom: -100px;
   }
   #wrap > .box > div:nth-child(5){
    transform-origin: bottom;
    transform: rotateX(90deg);
    top: -100px;
   }
   #wrap > .box > div:nth-child(4){
    transform-origin: left;
    transform: rotateY(90deg);
    right: -100px;
   }
   #wrap > .box > div:nth-child(3){
    transform-origin: right;
    transform: rotateY(-90deg);
    left: -100px;
   }
   
   
   #wrap > .box > div:nth-child(2){
    transform: translateZ(-100px) rotateX(180deg);/* 调整字反 */
   }
   #wrap > .box > div:nth-child(1){
    z-index: 1;
   }
   
   #wrap:hover .box{
    transform: rotateX(-180deg);
   }
  </style>
 </head>
 <body>
  <div id="wrap">
   <div class="box">
    <div>前</div>
    <div>后</div>
    <div>左</div>
    <div>右</div>
    <div>上</div>
    <div>下</div>
   </div>
  </div>
 </body>
</html>

改进
#wrap > .box > div:nth-child(6){
    transform: rotateX(270DEG);
   }
   #wrap > .box > div:nth-child(5){
    transform: rotateX(90DEG);
   }
   #wrap > .box > div:nth-child(4){
    transform: rotateY(90DEG);
   }
   #wrap > .box > div:nth-child(3){
    transform: rotateY(270DEG);
   }
   #wrap > .box > div:nth-child(2){
    transform: rotateY(180DEG) rotate(180DEG);
   }
   #wrap > .box > div:nth-child(1){
   }
   
   #wrap:hover > .box{
    transform: rotateX(180DEG);
   }

三棱柱
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   /*n边形的外角和为360  360/n
   n变形的内角 180 - 360/n*/
   *{
    margin: 0;
    padding: 0;
   }
   #wrap{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    border: 1px solid;
    
    perspective: 100px;
   }
   
   #wrap > .box{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    
    transition:3s ;
    transform-style: preserve-3d;
    transform-origin: center center -28.867513459481287px; 
   }
   #wrap > .box > div{
    position: absolute;
    width: 100px;
    height: 100px;
    background: pink;
    text-align: center;
    font: 50px/100px "微软雅黑";
    
    transform-origin: center center -28.867513459481287px;
    backface-visibility: hidden;
   }
   #wrap > .box > div:nth-child(3){
    transform: rotateY(240deg);
   }
   #wrap > .box > div:nth-child(2){
    transform: rotateY(120deg);
   }
   #wrap > .box > div:nth-child(1){
   }
   
   #wrap:hover > .box{
    transform: rotateY(360DEG);
   }
  </style>
 </head>
 <body>
  <div id="wrap">
   <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
   </div>
  </div>
 </body>
</html>

多愣住
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   /*n边形的外角和为360  360/n
   n变形的内角 180 - 360/n*/
   *{
    margin: 0;
    padding: 0;
   }
   html,body{
    height: 100%;
    overflow: hidden;
   }
   
   #wrap{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    /*border: 1px solid;*/
    
    perspective: 1000px;
   }
   
   #wrap > .box{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height:300px;
    transition:10s transform;
    transform-style: preserve-3d;
    /*transform-origin: center center -28.867513459481287px;*/ 
   }
   #wrap > .box > div{
    position: absolute;
    width: 300px;
    height: 300px;
    background: pink;
    text-align: center;
    font: 50px/300px "微软雅黑";
    /*transform-origin: center center -28.867513459481287px;*/
    backface-visibility: hidden;
   }
   /*#wrap > .box > div:nth-child(3){
    transform: rotateY(240deg);
   }
   #wrap > .box > div:nth-child(2){
    transform: rotateY(120deg);
   }
   #wrap > .box > div:nth-child(1){
   }*/
   
   #wrap:hover > .box{
    transform: rotateY(360DEG);
   }
  </style>
 </head>
 <body>
  <div id="wrap">
   <div class="box">
   </div>
  </div>
 </body>
 <script type="text/javascript">
  
  //n：棱数
  window.οnlοad=function(){
   createLZ(10);
  }
  
  function createLZ(n){
   var boxNode = document.querySelector("#wrap > .box");
   var stlyleNode = document.createElement("style");
   //转为外角
   var degOut = 360/n;
   //内角
   var degIn = 180 - 360/n;
   
   var text = "";
   var cssText = "";
   for(var i=0;i<n;i++){
    text+="<div>"+(i+1)+"</div>";
    cssText+="#wrap > .box > div:nth-child("+(i+1)+"){transform: rotateY("+(i*degOut)+"deg);}";
   }
   
   boxNode.innerHTML=text;
   
   var mianNode = document.querySelector("#wrap > .box > div");
   //棱长
   var length = mianNode.offsetWidth;
   
   cssText+="#wrap > .box{transform-origin: center center -"+(length/2 * Math.tan((degIn/2)*Math.PI/180))+"px;}";
   cssText+="#wrap > .box > div{transform-origin: center center -"+(length/2 * Math.tan((degIn/2)*Math.PI/180))+"px;}";
   
   
   stlyleNode.innerHTML=cssText;
   document.head.appendChild(stlyleNode);
  }
  
  
  
 </script>
</html>

Manta__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
024 3D

3D变形在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外3D平移transform: translateZ(length)是3D Transformaton特有的，其他两个2D中就有translateZ它不能是百分比值;那样的移动是没有意义的。transform: translate3d( translateX, ,translateY, translateZ);3D缩放...
复制链接

扫一扫

专栏目录