CSS 3D转换——transform 属性的 rotatex() 方法和 rotatey() 方法

最新推荐文章于 2024-06-19 09:58:25 发布
最新推荐文章于 2024-06-19 09:58:25 发布
阅读量2.2w 收藏 38
点赞数 11
分类专栏： # CSS学习笔记 文章标签： CSS 3D转换 transform属性 rotatex()方法 rotatey()方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41104353/article/details/79463728
版权

目录

CSS 3D转换

浏览器支持

转换属性

3D Transform方法

常用方法

rotatex() 方法

rotatey() 方法

结语

CSS 3D转换

CSS3 允许我们使用 3D 转换来对元素进行格式化。

 

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性ChromeIEFirefoxSafariOpera
transform36.0
12.0 -webkit-		10.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
transform-origin
(three-value syntax)		36.0
12.0 -webkit-		10.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
transform-style36.0
12.0 -webkit-		11.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
perspective36.0
12.0 -webkit-		10.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
perspective-origin36.0
12.0 -webkit-		10.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
backface-visibility36.0
12.0 -webkit-		10.016.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-

 

 

转换属性

属性描述CSS
transform向元素应用 2D 或 3D 转换。3
transform-origin允许你改变被转换元素的位置。3
transform-style规定被嵌套元素如何在 3D 空间中显示。3
perspective规定 3D 元素的透视效果。3
perspective-origin规定 3D 元素的底部位置。3
backface-visibility定义元素在不面对屏幕时是否可见。3

 

3D Transform方法

函数描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

 

常用方法

 

rotatex() 方法

通过 rotatex() 方法，元素围绕其 X 轴以给定的度数进行旋转。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
-moz-transform:rotateX(120deg); /* Firefox */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

<p><b>注释：</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p>

</body>
</html>

 

rotatey() 方法

通过 rotatey() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
-moz-transform:rotateY(130deg); /* Firefox */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

<p><b>注释：</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p>

</body>
</html>

结语

时至今日，我自己都不知道这写的啥玩意。特意再搜了下，觉得 https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 这篇写比较有诚意，大家可以看下。

 

在到处之间找我
关注
  • 11
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中坐标轴旋转角度,CSS3 旋转rotate()rotatex()rotatey()应用实例
weixin_29190651的博客
06-03 6197
CSS3中，对象转换有多种方式，其中一种为旋转rotate()，主要是围绕X轴或Y轴旋转，所以rotate()又要细分为rotatex()和rotatey()，前者用于设置对象围绕X轴旋转，后者用于设置对象围绕Y轴旋转。rotate既可控制对象作2D旋转，又可控制对象作3D旋转，本篇先介绍作2D旋转的语法规则和应用实例，后续篇章再介绍作3D旋转的情况。下面先看rotatex()、rotatey()...
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
xuan的博客
08-23 2万+
1 transform属性 在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。 （1）浏览器支持 到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。  2 旋转 使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。...
css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin
zyz00000000的博客
09-28 1万+
注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的 1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸 注意：Internet Explorer 9 要求前缀 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 属性，Chrome 和 Safari 要求...
css记录：三维变换之transform
最新发布
计算机图形学
06-19 849
CSS 的transform属性用于对元素进行 2D 或 3D 转换。这些转换包括旋转、缩放、倾斜和移动等。在 3D 变换中，我们可以创建更为复杂和动态的效果，让用户体验更为丰富。
css元素转换(旋转函数、rotateX 和 rotateY 的使用、移动函数、缩放函数、过渡、动画)详解
Argonaut_的博客
01-05 1万+
页面上有两个 div 元素块，使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素；使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。在上面代码中，用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。接下来给大家介绍一下 transition-timing-function 属性的取值吧！
transform三大属性之rotate（旋转）
热门推荐
weixin_44167504的博客
09-05 4万+
transform三大属性之rotate
transform rotatex、y、z的深刻理解
weixin_30654583的博客
11-13 943
1、先上图 2、以x轴为例，y、z轴一样的道理，学习时关注三句话即可豁然开朗。。。 【 　　第一、x、y轴分别为标签中心线，z轴垂直标签中心点 　　第二、围绕x轴旋转时，转动x轴即可。【方向：让+x插向自己，旋转度数为正时-》顺时针】 　　第三、如果有多个参数(参数动作同时发生)，注意参数顺序。【 　　　　例1 ： { transform: rotateX(90deg) tr...
transform三大属性 rotate、scale、translate
weixin_44167504的博客
09-05 1万+
transform三大属性 transform三大属性：rotate(旋转) scale(缩放) translate(移动) 其他属性：skew(扭曲) matrix(矩阵变形) 语法：transform：rotate | scale | skew | translate |matrix; 一. 旋转rotate rotate(angle)定义2D旋转 rotateX(angle) rotateY(angle) rotateZ(angle) rotate3d(angle)定义3d旋转 二.
CSS3 3D 转换rotateX()、rotateY()
web前端基础知识
03-03 377
浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换。 Chrome 和 Safari 需要前缀 -webkit-。 Opera 仍然不支持 3D 转换（它只支持 2D 转换）。   rotateX() 方法 通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。 实例 div { transform: rotateX(...
CSS3中的transform属性进行2D和3D变换的基本用法
09-24
当要实现3D变换时，transform属性同样提供了一些3D专用的变换函数，比如rotateX、rotateY和rotateZ，它们分别对应绕x轴、y轴和z轴旋转。但需要注意的是，为了看到3D效果，必须将元素包裹在一个具有perspective属性的...
CSS3之2D与3D变换的实现方法
12-13
3D变换还包括`rotateX()`, `rotateY()`, `rotateZ()`，分别围绕x、y、z轴旋转，以及`perspective()`，用于设置观察者到3D元素的距离，影响3D效果的深度感。 为了在浏览器中看到3D效果，通常需要设置`transform-...
CSS3转换功能transform主要属性值分析及实现分享
09-25
CSS3的转换（transform）功能是现代网页设计中不可或缺的一部分，它允许开发者对元素进行二维或三维空间的操作，包括旋转、缩放、斜切、平移等，从而创造出丰富的动态效果。这一特性极大地提升了用户体验，使得网页...
css3 transform属性制作线条的3D爱心动画demo.zip
02-17
在3D变换中，`rotateX()`, `rotateY()`, 和 `rotateZ()` 函数分别用于绕X轴、Y轴和Z轴旋转元素。在这个3D爱心动画中，可能使用了这些函数来让线条从不同角度旋转，形成心形的立体形态。 此外，`scale()`函数用于...
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
10-22
本文主要讲述了利用CSS3中的transform属性和原生JavaScript来实现一个可以被鼠标拖动的3D立方体旋转效果。以下是详细的知识点介绍。 知识点一：CSS3的transform属性 transform是CSS3中用于变形的一个重要属性，它...
CSS----transform:rotate 旋转基本使用方法
weixin_44126737的博客
08-19 2万+
transform是css3属性。 有时候UI给的原型图是图片旋转出来的，而作为前端应该怎样取使用旋转还原原型图呢。 transform：scale(0.5) 缩放0.5倍 transform：rotate（90deg）transform：rotate（-270deg） 顺时针旋转90° transform：rotateX（90deg）沿x轴旋转90度 transform：rotateY（180deg）沿y轴旋转180度 通常为镜面翻转 <template> ...
CSS3属性 transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）（附代码）
qq_095的博客
09-04 1万+
CSS3属性 transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。 一.旋转 rotate 用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思...
在HTML中rotate属性,css3中transform属性实现的4种功能
weixin_29913191的博客
06-04 1246
1transform属性在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。(1)浏览器支持到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。2旋转使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。transform：rot...
css之transform篇
给我一颗橙子
10-03 1726
今天突然想到面试的时候被问道这个问题，居然没回答上来，心中无比愤懑，于是就诞生了这篇干货。好啦，进入正题了，下来我们就来介绍transform属性： 在css3中 transform属性主要包括以下值：旋转rotate、扭曲skew、缩放scale、移动translate、以及矩阵变形matrix 一、旋转rotate: rotateX()：绕X轴旋转某度 rotateY(
css rotateX() 方法
hugejihu9的专栏
01-17 1142
文章来自：源码在线https://www.shengli.me/css/601.html       效果：          
css3D语法transform
05-30
CSS 3D 中的 transform 属性用于定义元素的变换方式，包括平移、旋转、缩放、斜切等。 transform 属性有多个取值，其中常见的包括： 1. translate：用于定义元素的平移变换，可以设置 X 轴、Y 轴和 Z 轴的平移距离。 2. rotate：用于定义元素的旋转变换，可以设置 X 轴、Y 轴和 Z 轴的旋转角度。 3. scale：用于定义元素的缩放变换，可以设置 X 轴、Y 轴和 Z 轴的缩放比例。 4. skew：用于定义元素的斜切变换，可以设置 X 轴和 Y 轴的倾斜角度。 下面是一个例子，展示了如何使用 transform 属性实现一个立方体的效果： ```css .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; } .cube .face { position: absolute; width: 200px; height: 200px; opacity: 0.8; } .cube .front { transform: translateZ(100px); background-color: #f00; } .cube .back { transform: rotateY(180deg) translateZ(100px); background-color: #0f0; } .cube .top { transform: rotateX(-90deg) translateZ(100px); background-color: #00f; } .cube .bottom { transform: rotateX(90deg) translateZ(100px); background-color: #ff0; } .cube .left { transform: rotateY(-90deg) translateZ(100px); background-color: #f0f; } .cube .right { transform: rotateY(90deg) translateZ(100px); background-color: #0ff; } ``` 在这个例子中，我们定义了一个立方体容器 .cube，同时给它的每个面 .face 加上了不同的背景颜色。通过设置每个面的 transform 属性，我们让立方体相对于自身进行了平移、旋转和缩放等变换，从而实现了 3D 的效果。注意，我们还设置了 transform-style 属性为 preserve-3d，以保证子元素也可以继承父元素的 3D 特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值