CSS3 3D转换

最新推荐文章于 2024-04-13 15:44:30 发布
最新推荐文章于 2024-04-13 15:44:30 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VVVZCS/article/details/82785285
版权

perspective

（1）perspective值越大，产生3D变换的时候会感觉距物体越远（不可为负数或者0，如果设置为0或者负数，那么就相当于人观察一个物体眼睛贴上去或者陷进去，就不会感觉到变化了）（也不能为百分比）

（2）一般为父元素设置perspective属性，设置完之后，如果其子元素设置了3D转换，那么就可以显示出来

具体效果看下面的rotate 3D变换

1，rotate

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    .demo{
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0);
      border: 2px solid #000;
      transform: rotateX(0deg);
    }
    .content{
      perspective: 240px;
      margin: 50px;
      width: 104px;
      height: 104px;
      background-color: rgba(0, 0, 255);
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="demo"></div>
  </div>
</body>
</html>

 

改变rotateX的值

改变rotateY的值

改变rotateZ的值

语法

rotate3d(x, y, z, angle) 

x<number 类型> 表示旋转轴x坐标方向上的矢量（可以为小数）

y<number 类型> 表示旋转轴x坐标方向上的矢量（可以为小数）

z<number 类型> 表示旋转轴x坐标方向上的矢量（可以为小数）

angle旋转角度，允许负值

----------------------------------------------------------------

2，perspective-origin属性

观察位置：

语法：

perspective-origin: x, y;

默认值：perspective-origin: center, center;

x可填：left | center | right | 0% | 50% 100% | n px

y可填：top | center | bottom | 0% | 50% 100% | n px

在填像素的时候，相当的是 在x为left | 0% 和y为top | 0% 的位置

只有一个值的时候，默认第二个值为center

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    .demo{
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0);
      border: 2px solid #000;
      transform: rotateX(40deg);
    }
    .content{
      perspective: 240px;
      perspective-origin: center center;
      margin: 50px;
      width: 104px;
      height: 104px;
      background-color: rgba(0, 0, 255);
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="demo"></div>
  </div>
</body>
</html>

我就不一一试过去了

3，translate3d

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    .demo{
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0);
      border: 2px solid #000;
      transform: translate3d(0px, 0px, -100px);
    }
    .content{
      perspective: 240px;
      margin: 50px;
      width: 104px;
      height: 104px;
      background-color: rgba(0, 0, 255);
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="demo"></div>
  </div>
</body>
</html>

设置上半透明

4，transform-origin

设置需要3D变换的元素的位置

x轴: left | center | right | <length> | <percentage>

y轴: top | center | bottom | <length> | <percentage>

z轴: <length>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    .demo{
      width: 100px;
      height: 100px;
      background-color: rgba(255, 0, 0);
      border: 2px solid #000;
      transform: rotate3d(1, 1, 1, 40deg);
      transform-origin: center center 0px;
    }
    .content{
      perspective: 240px;
      margin: 50px;
      width: 104px;
      height: 104px;
      background-color: rgba(0, 0, 255);
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="demo"></div>
  </div>
</body>
</html>

太多了  可以自己试一下

---------------------------------------------------------------

3D骰子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    .content{
      perspective-origin: center center;
      margin: 300px;
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
      animation: my_rotate 3s infinite;
      animation-direction: alternate;
      /*Safari and Chrome*/
      -webkit-animation: my_rotate 3s infinite;
      --webkit-animation-direction: alternate;
    }
    @keyframes my_rotate {
      from {
        transform: rotate3d(1, 1, 1, 0deg);
      } to {
        transform: rotate3d(1, 1, 1, 360deg);
      }
    }
    /*Safari and Chrome*/
    @-webkit-keyframes my_rotate {
      from {
        transform: rotate3d(1, 1, 1, 0deg);
      } to {
        transform: rotate3d(1, 1, 1, 360deg);
      }
    }
    .demo{
      width: 200px;
      height: 200px;
      position: absolute;
      color: white;
      line-height: 200px;
      text-align: center;
      font-size: 30px;
    }
    #Bottom{
      background-color: rgba(255, 105, 180, 0.5);
      transform: rotateX(90deg);
      transform-origin: bottom;
      /*Safari and Chrome*/
      -webkit-transform: rotateX(90deg);
      -webkit-transform-origin: bottom;
    }
    #Left{
      background-color: rgba(147, 112, 219, 0.5);
      transform: rotateY(90deg);
      transform-origin: left;
      /*Safari and Chrome*/
      -webkit-transform: rotateY(90deg);
      -webkit-transform-origin: left;
    }
    #Top{
      background-color: rgba(135, 206, 250, 0.5);
      transform: rotateX(-90deg);
      transform-origin: top;
      /*Safari and Chrome*/
      -webkit-transform: rotateX(-90deg);
      -webkit-transform-origin: top;
    }
    #Front{
      background-color: rgba(220, 220, 220, 0.5);
      /*transform: rotateX(-90deg);*/
      transform-origin: center center;
    }
    #Behind{
      background-color: rgba(250, 128, 114, 0.5);
      transform: translateZ(-200px);
      transform-origin: right;
      /*Safari and Chrome*/
      -webkit-transform: translateZ(-200px);
      -webkit-transform-origin: right;
    }
    #Right{
      background-color: rgba(144, 238, 144, 0.5);
      transform: rotateY(-90deg);
      transform-origin: right;
      /*Safari and Chrome*/
      -webkit-transform: rotateY(-90deg);
      -webkit-transform-origin: right;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="demo" id="Bottom">bottom</div>
    <div class="demo" id="Left">left</div>
    <div class="demo" id="Top">top</div>
    <div class="demo" id="Front">front</div>
    <div class="demo" id="Behind">behind</div>
    <div class="demo" id="Right">right</div>
  </div>
</body>
</html>

 

----------------------------------------------------------------

参考文章：

https://segmentfault.com/q/1010000007466275

https://www.cnblogs.com/xiaohuochai/p/5351477.html

 

VVVGG
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3D转换
chenyiboke的博客
11-17 776
3D 转换 我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。 **有什么特点：** 近大远小。 物体后面遮挡不可见。 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。 1. 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴 ： 水平向右 注意： x右边是正值，左边是负值。 y轴 ： 垂...
CSS3 3D 转换
01-19
#rotate2D,#rotate3D { width: 80px; height: 70px; color: white; position:relative; font-weight:bold;...CSS3 3D 转换 ...CSS3 允许您使用 3D 转换来对元素进行格式化。 在本章中，您将学到其中的一些 3D
CSS：3D效果（位移、旋转）
李建雨的博客
11-10 1711
浏览器平面为二维平面，以浏览器可视区域左上角为原点，X轴为左上到右上，正方向为右；Y轴为左上到左下，正方向为下。 要想实现3D效果，我们需要引入Z轴，这条Z轴垂直于屏幕，以出平面为正方向。 transform产生的位移和旋转都不脱标！！！ 1、3D位移 3D位移函数与2D位移一样，需要使用transfrom变量，变量值有如下几个： 1、transform:translateX(位移量) 2、transform:translateY(位移量) 3、transform:translateZ(位移量)
css3之transform详解
五月兰博客
07-22 864
Transform，顾名思义，是“变形”之意，它是CSS3中重要的动画属性之一，包含“旋转rotate”、“扭曲skew”、“缩放scale”、“移动translate”以及“矩阵变形matrix”5种变形方式。 基本语法： transform ： none | none：表示不变形； ：表示一个或多个变换函数，指rotate 、 scale 、 skew 、transl
玩转 CSS3 3D 变换：打造炫酷立体网页效果
最新发布
小z的博客
04-13 9747
19(20)-2- CSS3 立体 3D 变换
css3动画属性解析:【transform -变形】
w15228212327_cc的博客
06-19 687
前面几篇文章我们已经一起学习了animation和transition 的使用，今天我们终于开始学习transform和translate了，其实translate只是transform的一个属性，只是很多初学者对transform（变形）、translate（移动）和transition（过渡）容易混淆，所以我把它们放到一块来写了，小伙伴们可不要混淆啊。 ...
css3动画-transform属性
热门推荐
磷火的博客
05-14 1万+
css3动画--transform属性（translate，scale，rotate）
CSS动画 3D反转Tab
01-29
CSS3中的3D转换提供了在三维空间中操作元素的能力，增强了视觉效果。主要有以下几种变换： 1. `transform: translate3d(x, y, z)`: 平移元素在X、Y、Z轴上的位置。 2. `transform: rotateX(angle)`: 以X轴为轴心...
CSS-3D悬停相册动画
03-21
1. **3D转换基础** - `transform-style: preserve-3d;`：此属性确保子元素在3D空间中保持它们的3D结构，而不是扁平化。 - `perspective`: 设置观察者的视距，影响3D元素的深度感。 - `backface-visibility: ...
利用HTML5+CSS3实现3D转换效果实例详解
09-24
对于css的二维世界，相信大家都不陌生。在二维的世界里，我们可以对元素设置宽高、位置、旋转、背景等等。...下面这篇文章主要给大家介绍了利用HTML5+CSS3实现3D转换效果的相关资料，需要的朋友可以参考。
css3 3d光照文字特效
11-23
【CSS3 3D光照文字特效】是一种利用CSS3中的3D转换和光照效果来创建出立体、动态的文字展示方式。这种技术极大地丰富了网页设计的表现力，使得文本不仅仅局限于二维平面，而是能够呈现出三维空间的视觉效果。下面将...
3D转换(位移,旋转)
qq_52006046的博客
10-05 243
3D转换(位移,旋转)透视:可以实现近大远小,近实远虚,如果想要z轴效果生效,必须要给父级加透视.不加透视,x轴和y轴旋转的正值和负值视觉上是一样的效果
css3之3D转换
weixin_73838148的博客
05-19 553
旋转方向判断：左手准则（度数为正，则逆时针）。（透视值越大，成像更小。
CSS3 transition 属性 translate3d rotate
blogscsdn的博客
08-17 4872
transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ 必须加上            div:hover
深入理解CSS变形transform(3d)
weixin_33744141的博客
04-07 481
前面的话 　　本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility   坐标轴 　　在了解透视之前，首先要先了解坐标轴。3D变形与2D变...
web前端基础 html5+css3（十二.2D转换，动画，3D转换）
weixin_41325924的博客
10-12 1224
1.2D转换之移动translate （1）transform:translate(x,y); transform:translate(100px,100px); （2）transform:translateX(n); transform:translateX(500px); （3）transform:translateY(n); transform:translateY(500px); div{ width: 200px; height: 200px; backgrou
Css3 3D转换
m0_51495354的博客
11-30 757
Css3 3D转换
css3 3D转换
tumi
05-28 1743
一、转换方法：1、rotateX ()2、rotateY ()浏览器支持：Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换（它只支持 2D 转换）。rotateX ()方法：通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转div{transform: ...
CSS(八)
shi199434的博客
12-10 194
CSS3 3D 转换 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化。 在本章中，您将学到其中的一些 3D 转换方法： rotateX() rotateY() 点击下面的元素，来查看 2D 转换与 3D 转换之间的不同之处： 2D rotate 3D rotate 浏览器支持 表格中的数字表示支持该属性
css transform3d
08-30
CSS transform 3D是一种CSS属性，用于实现在网页中对元素进行3D转换和动画效果。通过使用transform属性的rotateX、rotateY、rotateZ、translateX、translateY、translateZ、scaleX、scaleY、scaleZ等方法，可以实现元素的旋转、平移、缩放等3D效果。 在使用CSS transform 3D时，可以通过设置perspective属性来确定网页中的元素是2D变换还是3D变换。perspective属性规定了透视效果，决定了元素在页面上的显示效果。如果没有定义perspective属性，就没有3D效果。perspective属性可以在父元素上设置，也可以在当前元素上设置。 在CSS代码中，perspective属性可以使用具体的数值来设置透视点的大小，也可以使用perspective()函数来设置。通过设置perspective属性，可以调整元素的视觉效果，使其看起来更具有立体感。 通过使用CSS transform 3D的方法，可以实现元素在x轴、y轴和z轴上的缩放效果。在示例代码中，通过设置scaleX、scaleY和scaleZ方法，可以分别实现元素在x轴、y轴和z轴上的缩放效果。当鼠标悬停在元素上时，通过设置:hover伪类和transform属性，可以触发缩放效果。 总结来说，CSS transform 3D是一种用于实现网页元素3D转换和动画效果的CSS属性。通过设置transform属性的方法，可以实现元素的旋转、平移和缩放等3D效果。通过设置perspective属性，可以调整元素的透视效果，使其看起来更具有立体感。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [CSS3的transform之3d转换、CSS3动画](https://blog.csdn.net/m0_46324704/article/details/125860882)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [css：transform的3D变换属性](https://blog.csdn.net/qq_50487248/article/details/130066660)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值