CSS3 3D transform

已于 2023-11-14 23:39:52 修改
阅读量1k 收藏 3
点赞数 2
分类专栏： CSS3 文章标签： css3 html5 html
于 2020-03-25 15:07:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwyp18809/article/details/105095696
版权

目录

一、transform简介

1、定义和用法

2、浏览器支持

3、语法

二、 学习步骤

1、 前情提要

2、 什么是3D transform变换

3、 关键点：rotateX, rotateY, rotateZ

4、 perspective属性

5、translateZ告诉你透视位置

6、perspective-origin

（1）源点向左偏

（2）源点左偏同时上偏

7、transform-style属性

8、backface-visibility

（1）什么是backface-visibility

（2）应用实例

①旋转的甜甜圈

②洒落的咖啡

9、实际应用-CSS 3D开门动画

一、transform简介

1、定义和用法
transform 属性对元素进行2D 或 3D 转换。该属性能让我们对元素进行旋转、缩放、移动或倾斜。

2、浏览器支持
在这里插入图片描述
（图片来源于“菜鸟教程”）

3、语法
transform: none|transform-functions
在这里插入图片描述

（来源：W3School http://www.w3school.com.cn/cssref/pr_transform.asp）

学习步骤

1、前情提要

在这里插入图片描述

这是css3 中的3D坐标系，后面会用的上

2、什么是3D transform变换

CSS3中的3D变换效果，本质上就相当于我们在生活中做各种动作时姿势体态的变换，又称姿态的变换。

举个栗子：

在这里插入图片描述

他们踢足球的过程就相当于在做3D变换！！！

所以，在现实生活中，一切的动作都属于3D变换。

3、关键点：rotateX, rotateY, rotateZ

3D transform中有下面这三个方法：

rotateX( angle )
rotateY( angle )
rotateZ( angle )
这三个是学习和理解3D transform的基础，也是弄懂perspective的突破口

rotateX( angle )：以x轴为转轴旋转

在这里插入图片描述

rotateY( angle )：以y轴为转轴旋转

在这里插入图片描述

rotateZ( angle )：以z轴为转轴旋转

在这里插入图片描述

还不懂？！举个栗子就知道了

在这里插入图片描述

郭伟阳在体操比赛中的运动是：rotateX

在这里插入图片描述

蔡依林的钢管舞是：rotateY

在这里插入图片描述

这个运动员的运动就是：rotateZ

4、perspective属性

perspective的中文意思是：透视，视角！

在这里插入图片描述

perspective：400px；

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
在这里插入图片描述

CSS3 3D transform的透视点是在浏览器的前方，相当于我们眼睛的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

先来看看perspective的作用：

CSS代码：

  .box{

            border:solid 1px #000;

            box-sizing:content-box;

            margin:100px auto;

            width:1000px;

            height:300px;

            /* 重点看这里 */

            perspective:800px;

        }

        .child{

            box-sizing:content-box;

            width:300px;

            height:300px;

            float:left;

            margin-left:5px;

            background-color:#87D30A;

            /* 重点看这里 */

            transform:rotateY(95deg);

        }

HTML代码：

<div class="box">

        <div class="child"></div>

        <div class="child"></div>

        <div class="child"></div>

        <div style="clear:both;"></div>

    </div>

在这里插入图片描述

从这个demo看box父元素上有perspective，child子元素Y轴旋转95度。从效果看可以想象这三个div的透视可以有一个交点，且这个交点看起来在第二个div附近。

接着，尝试不断调整perspective的值，从原来的800px调整到4000px，也就是原来的5倍。其他属性不变，看看效果。

在这里插入图片描述

调整了perspective后你会发现div旋转幅度变大了，且透视焦点转移到了第一个div附近。通过这个调整发现，改变perspective的值透视焦点会发生改变。

在这里插入图片描述

这就是3D世界的坐标图。而perspective在Z轴上，而perspective是设置Z轴的长度。在css3中只有设置了perspective的值元素才会有Z轴，perspective为none元素则没有Z轴(就是2D元素)。

5、translateZ告诉你透视位置
我们都知道近大远小的道理，对于没有rotateX以及rotateY的元素，translateZ的功能就是让元素在自己的眼前或近或远。

举个栗子：

我们设置元素perspective为201像素，如下：

perspective: 201px；

则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；

translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。

因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大，超过201像素的时候，该元素看不见了——这很好理解：子元素已经移到透视点之后了，也就是移到眼睛的后面了，我们是看不见眼睛后面的东西的！

6、perspective-origin
perspective-origin属性是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置(或者说基点)，在该位置观看者好像在观看该元素的子元素。

Pespective-origin: x-axis y-axis;

x-axis:

定义视图在x轴上的位置。默认值：50%。可能的参数值形式:left、center、right、length和%。

y-axis:

定义视图在y轴上的位置。默认值：50%。可能的参数值形式:top、center、bottom、length和%。

如果看了上面的介绍还是不太明白，没有能在大脑中形成一个清晰的概念，那么看下面这张截取的W3C官网的图:

在这里插入图片描述

(图片来源于：CSDN博主“我是新手”)

再来几个代码实栗就应该差不多懂了

（1）源点向左偏

.w1 {

perspective: 1000px;

}

.w2{

perspective: 1000px;

 perspective-origin: left center;

 }

.cube{

font-size: 4em;

width: 2em;

margin: 1.5em auto;

 transform-style: preserve-3d;

 }

在这里插入图片描述

源点左偏就相当于你正对这个正方体的时候，把头往左偏，你的眼睛所看到的画面，你的眼睛就相当于源点！

一个不够？！再来个栗子

（2）源点左偏同时上偏

.w1 {

perspective: 1000px;

 } 

.w2{

perspective: 1000px;

perspective-origin: left -100px;

 }

在这里插入图片描述

现在知道了perspective-origin改变源点的作用了吧，把源点当做自己的眼睛，改变源点的位置，就相当于改变你眼睛的位置！

7、transform-style属性
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d

语法：transform-style: flat | preserve-3d

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。

注意：transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素

是不是有点迷糊，没事，咱举个形象点的栗子

《喜羊羊与灰太狼》中的灰太狼都多多少少知道点吧，咱拿他来举例

首先把灰太狼这个整体形象看做父元素，灰太狼的鼻子，耳朵，嘴等是子元素

第一种状态：灰太狼被红太狼一锅拍在了衣服上（被拍成了扁平的）

在这里插入图片描述

现在就相当于灰太狼这个元素设置了transform-style，值为flat，不管你沿X、Y轴怎么转， 鼻子、耳朵、嘴等都是与灰太狼这个整体在一个平面，你看到的也就只有一个扁平的灰太狼

第二种状态：转头深情凝望
在这里插入图片描述

现在就相当于把transform-style的值设置为preserve-3d

可以看到灰太狼转头后（相当于把灰太狼这个元素以Y轴为轴心旋转了），鼻子、耳朵、嘴等都不是在同一个平面上，而是满满的立体感

现在来点专业的解释解释吧

在这里插入图片描述

上图的上部分：

当元素设置.rotate设置了flat值时，其子元素img不会根据translateZ()值摊开，而在同一平面旋转；

上图的下部分：

当元素.rotate设置了preserve-3d值时，其子元素img会根据translateZ()值摊开，不再会堆叠在一起。

注意：将元素的transform-style值设置为preserve-3d，就不能为了防止子元素溢出容器而将overflow值为hidden，如果设置了overflow:hidden同样可以迫使子元素出现在同一平面（和元素设置了transform-style为flat一样的效果）

8、backface-visibility
当你翻转一个元素的时候，你看到的是什么？通常情况下，我们应该看到的是元素的背面，这是正常的情况，但是有时候我们希望翻转一个元素后看到的是另一个元素。通过backface-visibility:hidden;属性，我们可以使一个元素在翻转之后消失，这是可以使用另一个元素放在它的背面，从而制作出一种元素翻转之后出现另一个元素的效果。

什么是backface-visibility
backface-visibility属性和3D transform效果相关，它用于决定当一个元素的背面面向用户的时候是否可见。例如下面图片展示的两个圆形元素，前面一个是正面，后面一个是背面。当它翻转到背面的时候，上面的文字应该是正面的镜像，这是默认的行为。

在这里插入图片描述

（以Y轴为轴心）

（2）应用实例
①旋转的甜甜圈

在这里插入图片描述

这个demo是理解backface-visibility属性的很好的例子。

当我们翻转了甜甜圈后，不希望再看到它的front面。因此我们需要另一幅代表甜圈背面的图片来取代原来的背面。

我们会将"front"面和"back"main放置在相同的位置上，"front"面位于"back"面的前面。"front"面使用backface-visibility: hidden;来隐藏背面。它们会沿Y轴同步旋转，转动背面时，"front"面消失，另一幅图片被展示出来。

关键代码：

img {

  position: absolute;

  animation: turn 2s infinite;

}

  

.donut-front {

  z-index: 5;

  backface-visibility: hidden;

}

  

@keyframes turn {

  to {

    transform: rotateY(360deg);

  }

}

两张图片都使用相同的动画，只是第一张图片在旋转到背面时就被隐藏起来，这是第二张图片就自然的展示出来。

②洒落的咖啡

在这里插入图片描述
（以Y轴为轴心）

这个demo中有两个咖啡杯图片：一个是杯子的正面，一个杯子的背面。咖啡的水滴是一幅单独的图片，开始时它是隐藏的，它被在X轴上旋转了180度，这使得我们开始时看到的是它的背面，又因为设置了backface-visibility: hidden;，因此它是不可见的。

关键代码：

img {

  position: absolute;

  animation: turn-over 2s 700ms infinite;

}

  

.cup-front {

  z-index: 3;

  backface-visibility: hidden;

}

  

.coffee-drip {

  position: absolute;

  transform: rotateX(180deg);

  backface-visibility: hidden;

  animation: spill 2s infinite;

  animation-delay: 700ms;

}

  

@keyframes turn-over {

  to {

    transform: rotateX(-180deg);

  }

}

  

@keyframes spill {

  to {

    transform: translateY(200px);

  }

}

更多使用CSS3 backface-visibility属性制作翻转动画效果

http://www.htmleaf.com/Demo/201504151687.html

实际应用-CSS 3D开门动画
演示效果：

在这里插入图片描述
（开门3D效果，有声音光线变化）

CSS代码：@charset “utf-8”;

/* CSS Document */



.door-box {

    max-width: 100%;

    width: 375px;

height: 628px;

    margin: 40px auto;

    //background-color: #2a273c;

background-image: url(木纹地板.jpg);

    font-family: STHeiTi, SimHei;

    overflow: hidden;

    position: relative;

    z-index: 1;

}

.door-box.active {

    animation: flyIntoRoom 1s both;

}

.door-box div {

    position: absolute;

}

.wall {

    left: 0;

top: 0;

right: 0;

bottom: 46px;

    border-bottom: 3px solid #211820;

    background-color: #768bb6;

    max-height: calc(1.8 * (375px - 80px));

    margin: auto;

    box-shadow: 0 -200px #768bb6;

}

.door-border {

    top: 28px;

    left: 40px;

    right: 40px;

    bottom: 0;

    border: 3px solid #211820;

    border-radius: 2px 2px 0 0;

    border-bottom: 0;

    background-color: rgba(33,26,26,1.00);

}

.door-frame {

    top: 10px;

left: 9px;

right: 9px;

bottom: 0;

    border: 3px solid #211820;

    border-radius: 2px 2px 0 0;

    border-bottom: 0;

    background-image: url(卧室.jpg);

background-size: 200% 100%;

    -webkit-perspective: 1200px;

    perspective: 1200px;

}

.door {

    left: 0; top: 0; right: 0;  bottom: 0;

    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;

    transform-origin: left;

    transform: rotateY(0deg);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}

.door-face-1,

.door-face-0 {

    left: -3px; top: -3px; right: -3px; bottom: -3px;

    border: 3px solid rgba(33,26,26,1.00);

   

background-image: url(木门.jpg);

background-size: 100% 100%;

}

.door-face-0 {

    transform: translateZ(-12px);

}

.door-face-1 {

    transform: translateZ(0);

}

.door-face-2 {

    height: 6px;

    left: -3px; right: -3px; top: 0;

    border: 3px solid #211820;

    border-radius: 2px;

    background-color: rgba(33,26,26,1.00);

    transform: translate3D(0, -7.5px, -6px) rotateX(90deg);

}

.door-face-3 {

    width: 6px;

    top: -3px; right: 0;

bottom: -3px;

    border: 3px solid #211820;

    border-radius: 2px;

    background-color: rgba(33,26,26,1.00);

    transform: translate3D(7.5px, 0, -6px) rotateY(90deg);

}

/*光线*/

.light {

    left: 0; top: 0; bottom: 0;

    background:rgba(219,207,161,1);

    width: 1000px;

    transform: translateZ(-13px);

}

/*门牌*/

.door-card {

    width: 165px;

height: 60px;

    line-height: 60px;

    background-color:rgba(55,44,45,0.7);

    top: 60px;

left: 0;

right: 0;

    margin: auto;

    text-align: center;

    font-size: 30px;

    border: 3px solid;

    border-radius: 10px;

}

.door-btn {

    left: 0; right: 0;

    text-align: center;

    margin-top: 140px;

    font-size: 24px;

    color: #9dbce3;

    line-height: 36px;

}

.door-in {

    width: 104px; height: 40px;

    border-radius: 40px;

    border: 2px solid;

    line-height: 40px;

    background-color: #eacc86;

    font-family: inherit; font-size: 24px;

    padding: 0; margin: 10px 0;

}

/* 动画 */

@keyframes flyIntoRoom {

    from {

        transform: scale(1) translateZ(0);

        opacity: 1;

    }

    to {

        transform: scale(2) translateZ(100px);

        opacity: 0;

    }

}

.room-img {

    position: absolute;

    width: 375px;

max-width: 100%;

    left: 0; right: 0;

top: 40px;

    margin: auto;

}

HTML代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>3D开门动画</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>



<body>

<div id="doorBox" class="door-box">

    <div class="wall">

        <div class="door-border">

            <div class="door-frame">

                <!-- 门 -->

                <div id="door" class="door">

                    <!-- 门后的光线 -->

                    <div id="light" class="light" style="opacity: .8;" hidden=""></div>

                    <!-- 门后 -->

                    <div class="door-face-0"></div>

                    <!-- 三个面 -->

                    <div class="door-face-2"></div>            

                    <div class="door-face-1">

                        <!-- 门上的挂牌 -->

                        <div class="door-card">我的卧室</div>

                        <!-- 进入按钮 -->

                        <div class="door-btn">

                            <button id="doorBtnIn" class="door-in">进入</button>

                        </div>

                    </div>

                    <div class="door-face-3"></div>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- 书房 -->

<img src="木纹地板.jpg" class="room-img" width="375" height="500">

<div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div>



</body>



</html>

JS代码：

<script>

// 门，光线这类运动元素

var eleDoor = document.getElementById('door');

var eleLight = document.getElementById('light');

var eleDoorBox = document.getElementById('doorBox');

// 开门音效mp3

var eleAudioOpen = document.getElementById('audioOpen');

// 开门动画

var percentDoor = 0;

var fnOpenDoor = function () {

percentDoor++;

// 门完全打开后，进入下一个画面

if (percentDoor == 100) {

//eleDoorBox.classList.add('active');

return;

}

// 门打开

eleDoor.style.transform = 'rotateY('+ (-90 * percentDoor / 100) +'deg)';

eleLight.removeAttribute('hidden');

// 光线变化

eleLight.style.opacity = 0.8 - 0.9 * percentDoor / 100;



setTimeout(fnOpenDoor, 16);

};

document.querySelector('#doorBtnIn').addEventListener('click', function () {

eleAudioOpen.play();

fnOpenDoor();

});

</script>
依然饭特稀a
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
七夕表白程序：3D 立体表白相册（素材+源码），用它的都成功了！
致力于C语言C++知识分享！
08-12 2760
马上就要七夕了，学编程的你没有什么拿得出手的礼物吗？不如用我们所学知识来做个简单的 3D 立体表白相册吧！（特效绝对杠杠的） 希望大家（以及大家的那一位）喜欢! 效果截图如下：（笔者不像在座的各位，老婆还是很多的，所以......） 代码如下： index.html文件代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D立体动态
元素的旋转与缩放（transfrom）
weixin_45846139的博客
04-27 1418
transfrom是css3里面的属性，主要是运用于元素的2D或3D转换，它可以将元素旋转、缩放、移动和倾斜。 语法： div { transform:rotate(7deg);//2D旋转，括号参数为角度 } transfrom属性的默认值为none，意义为不进行转换。transfrom属性有很多，能够支持我们做一些简单的2d和3d动画，例如：一个不断旋转的立方体。 在使用transf...
简单介绍CSS3中的transform的使用方法
前端小伙子的博客
05-27 5965
transform属性分为2D转换和3D转换
CSS3之transform详解及示例（3d变形）
最新发布
Zbz00720的博客
05-11 619
主要还是考验大家对X,Y,Z三个轴的理解，能否在脑海中构思出大致的逻辑。
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
热门推荐
xuan的博客
08-23 2万+
1 transform属性 在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。 （1）浏览器支持 到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。  2 旋转 使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。...
前端|3D立体视频翻转动画
算法与编程之美
07-23 1610
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！基本介绍HTM...
js+css3页面滚动图片倾斜动画特效
06-10
js+css3页面滚动图片倾斜动画特效，利用.container元素集合所有图片，自定义滚动行为，每个div对应设置背景图片，当网页上下滚动时图片元素倾斜动画展示效果。
CSS3 3D transform变换，不过如此！.mhtml
03-15
CSS3 3D transform变换，不过如此！.mhtmlCSS3 3D transform变换，不过如此！.mhtmlCSS3 3D transform变换，不过如此！.mhtmlCSS3 3D transform变换，不过如此！.mhtmlCSS3 3D transform变换，不过如此！.mhtmlCSS3 ...
深入剖析CSS变形transform(3d)
09-24
本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility。一起...
纯css3 transform文字变形3D阴影效果代码
11-05
纯css3 transform文字变形3D阴影效果代码 纯css3 transform文字变形3D阴影效果代码
CSS 3D立方体制作
01-19
无需JavaScript, imagery, canvas 或者SVG，就可以利用最新的CSS制作出3D立方体，这的确是一件让人难以想象的事情。 目前制作出来的效果，只有Firefox 3.5，Safari 3.2+，Google Chorme支持。下面来为大家列举出相关...
CSS3中的transform属性进行2D和3D变换的基本用法
09-24
主要介绍了使用CSS3中的transform属性进行2D和3D变换的基本用法,文中同时介绍了使用perspective-origin定义初始位置的方法,需要的朋友可以参考下
关于CSS3属性transform详解
xiaoweids的博客
07-01 652
转自：微点阅读 https://www.weidianyuedu.com在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。 一.旋转 rotate 用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。 二.缩放 scale 用法：transform: scale(0.5) 或者 transform:
position
baneju9157的博客
09-21 339
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 re...
datax自定义transfrom 怎么写？
编程界小学生的博客
04-27 2718
在使用datax数据处理过程中，我们常常要对某些字段进行处理，一般我们首先想到的是使用数据库自定义函数来处理，可是当遇到一些复杂的场景，写函数可能就比较困难，或者根本无法实现，即使实现了，可移植性也很差，比如我最近遇到的 要对身份证号脱敏的需求，需求是要按照SM3加密的方式去脱敏身份证号，之前我也用过oracle实现，因为oracle可以使用java源的方式，可是最近新的产品使用mysql，这样就导致要重写开发这个脱敏的需求。mysql不支持java源，使用函数写出SM3加密算法无疑工作量庞大，可参考的
安装transform3d
shoukequ8359的博客
02-23 1915
pip install transforms3d
变型、旋转与缩放（z轴透视效果）
comegoing_xin_lv的博客
09-01 571
变型、旋转的3D效果与偏移量
了解 css中 backface-visibility 属性
IT_SunFei的博客
01-10 779
是一个CSS属性，用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。当我们对一个元素应用3D转换（例如旋转或倾斜）时，默认情况下，元素的背面是不可见的，即不会显示在屏幕上。这是因为浏览器默认会进行背面剪裁（backface culling），以提高性能和减少不必要的渲染。但有时候，我们可能需要让元素的背面可见，这时就可以使用属性来控制。visible：表示元素的背面可见。背面将正常渲染并显示在屏幕上。hidden：表示元素的背面不可见。
CSS3基础之3D转换
m0_61794291的博客
03-24 800
文章目录1. 三维坐标系2. 3D位移translate3d3. 透视perspective3.1`translateZ`4. 3D旋转`rotate3d`5. 3D呈现`transform-style` 1. 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的 x轴： 水平向右 注意： x 右边是正值，左边是负值 y轴： 垂直向下 注意： y 下面是正值，上面是负值 z轴： 垂直屏幕 注意： 往外面是正值，往里面是负值 tips： 3D 转换我们主要学习工作中最常用的3
transform3D
09-15
transform3D是CSS3中的一个属性，用于在3D空间中对元素进行变换。它可以同时对元素进行平移、旋转、缩放和倾斜等操作，实现更加丰富的效果。transform3D属性接受一个3D变换函数作为值，常见的函数包括translate3D、rotate3D和scale3D等。 在引用中，transform3D的相关函数是： - translate3D(x, y, z)：在3D空间中对元素进行平移，其中x、y和z分别表示在X轴、Y轴和Z轴上的偏移量。 - rotate3D(x, y, z, angle)：在3D空间中对元素进行旋转，其中x、y和z定义了旋转轴的方向，而angle表示旋转角度。 - scale3D(x, y, z)：在3D空间中对元素进行缩放，其中x、y和z分别表示在X轴、Y轴和Z轴上的缩放倍数。 需要注意的是，transform3D属性可以同时使用多个变换函数，并通过空格分隔。这样可以在一个规则中实现多个变换效果。 范例中的代码展示了如何使用transform3D属性对元素进行缩放和位移的操作。通过调整其中的值，可以实现不同的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值