css3转换（transform属性---rotate() / translateX() / translateY() / translate(x,y) / scaleX()...）

最新推荐文章于 2024-05-24 16:01:01 发布
最新推荐文章于 2024-05-24 16:01:01 发布
阅读量3.8k 收藏 10
点赞数 3
分类专栏： 前端基础入门 css/css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Allisa_yan/article/details/89355940
版权

目录

*** Transform（变形）属性 ***

  • 2D转换

  • rotate() 旋转


 

【注意】：rotate指定对象的2D旋转，指定对象指的是当前对象，也就是原元素，虽然子元素也会跟着动，但是子元素并没有发生相对旋转，旋转一定要有一个旋转中心，所以需先有transform-origin属性的定义来确定旋转中心，如果缺省，默认为transform-origin: 50% 50%。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style type="text/css">
* { margin: 0; padding: 0; list-style-type: none; }
a,
img { border: 0; }
body { font: 12px/180% Arial; }
.main { width: 1000px; margin: 50px auto; position: relative; }
.pic { width: 300px; height: 290px; border: 1px solid #ccc; background: #fff; box-shadow: 2px 2px 3px #aaa; }
.pic img { margin: 10px 0 0 8px; width: 285px; }
.pic p { text-align: center; font-size: 20px; }
.pic1 {
    -webkit-transform: rotate(7deg);
       -moz-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
         -o-transform: rotate(7deg);
            transform: rotate(7deg);
}
.pic2 {
    -webkit-transform: rotate(-8deg);
       -moz-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
         -o-transform: rotate(-8deg);
            transform: rotate(-8deg);
}
.pic3 { position: absolute; top: 40px; left: 350px; z-index: 2;
    -webkit-transform: rotate(-35deg);
       -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
         -o-transform: rotate(-35deg);
            transform: rotate(-35deg);
}
.pic4 { position: absolute; top: 360px; left: 350px; z-index: 3;
    -webkit-transform: rotate(35deg);
       -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
         -o-transform: rotate(35deg);
            transform: rotate(35deg);
}
.pic5 { position: absolute; top: 150px; left: 600px; z-index: 4;
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}
.pic6 { position: absolute; top: 180px; left: 280px; z-index: 5;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="main">
    <div class="pic pic1"><img src="images/1.jpg"><p>顺时针7度</p></div>
    <div class="pic pic2"><img src="images/2.jpg"><p>逆时针8度</p></div>
    <div class="pic pic3"><img src="images/3.jpg"><p>逆时针35度</p></div>
    <div class="pic pic4"><img src="images/4.jpg"><p>顺时针35度</p></div>
    <div class="pic pic5"><img src="images/5.jpg"><p>顺时针60度</p></div>
    <div class="pic pic6"><img src="images/6.jpg"><p>逆时针60度</p></div>
</div>
</body>
</html>

 

  • translate()  平移

 

            

 

 

//第一个参数必填；如果只写一个参数，则默认第二个参数为0

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translateX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
	transform: translateX(200px/em/vh/vm/%...(只能是具体的值,但是不能是left等方位词));
    transform: translateY(200px/em/vh/vm/%...(只能是具体的值,但是不能是top等方位词));
    transform: translate(200px,100px);
}
</style>
</head>
<body>
<div><img src="images/1.jpg"></div>
</body>
</html>

 

  • scale()  缩放

  // 不需要单位，数值仅能是0.几，不能是百分数

 

         

 

 // 第一个参数必填，第二个不写默认与第一个参数相同

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scaleX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
	transform: scaleX(.5); /*水平方向 基于中间线缩放为原来的50%，1-100%，...*/
       transform: scaleY(.5); /*竖直方向 基于中间水平线缩放*/
}
</style>
</head>
<body>
<!--验证-->
<div><img src="images/1.jpg"></div>
</body>
</html>

 

  • skew()  扭曲/斜切

 

【注意】：正数为逆时针斜切；负数为顺时针斜切；中心为图片的中心；（与rotate是相反的）

         // 当为90度时，图片会小时

 

// 当只有一个参数时，第二个参数默认为0

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skewX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
	transform: skewX(15deg);/**/
        transform: skewY(15deg);
        transform: skew(15deg, 15deg);
}
</style>
</head>
<body>
<div><img src="images/1.jpg"></div>
</body>
</html>

 

  • 3D转换

  • rotate3d()

       

 

     

 

    

 

  

 

【注意】：在transform: rotate3d(x, y, z, angle);中，第一个参数表示X轴，第二个参数表示Y轴，第三个参数表示Z轴，其中0为该方向不旋转，大于0为正方向旋转（顺时针），小于0为负方向旋转（逆时针），第四个参数表示旋转的角度，参数不允许省略。（rotate3d(0,0,1,-45deg) = rotate3d(0,0,-1,45deg)）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotateX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
	transform: rotateX(45deg);
        transform: rotateY(45deg);
        transform: rotateZ(45deg);
        transform: rotate3d(1, 1, 1, 45deg);
}
</style>
</head>
<body>
<div><img src="images/1.jpg"></div>
</body>
</html>

 

  • translate3d()---增加了z轴方向平移

  // 视觉上不太明显，适用于 遮罩应用

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translateZ</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
	transform: translateZ(200px);
        transform: translate3d(200px, 200px, 200px);
}
</style>
</head>
<body>
<div><img src="images/1.jpg"></div>
</body>
</html>

 

  • scale3d()---增加了z轴方向缩放

   // 视觉上没有效果

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scaleZ</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
	transform: scaleZ(.5);
        transform: scale3d(.5, .5, .5); /*如若不想缩放，则为1*/
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

 

*** transform 与 坐标系统 *** （简单说：围绕哪个点转换）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>origin</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
	transform: rotate3d(1, 1, 1, 45deg);
	transform-origin: left top 0; /*原元素的左上角*/
}
</style>
</head>
<body>
<div><img src="images/1.jpg"></div>
</body>
</html>

 

*** css3矩阵 ***（了解，后续用到再补充吧~）

 

*** css3扩展属性 ***

因为之前3d效果中部分效果不明显，所以引入以下属性

  • transform-style属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform style</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	     -o-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}
div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(-45deg); background: url(images/circle_inner.png) no-repeat center center; }
div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(-45deg); background: url(images/circle_middle.png) no-repeat center center; }
div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(-45deg); background: url(images/circle_outer.png) no-repeat center center; }
div > .pig{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/pig.png) no-repeat center center; }
</style>
</head>
<body>
<div>
	<div class="inner"></div>
	<div class="middle"></div>
	<div class="outer"></div>
	<div class="pig"></div>
</div>
</body>
</html>

 

  • perspective属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	     -o-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-perspective: 500px;
	   -moz-perspective: 500px;
	    -ms-perspective: 500px;
	     -o-perspective: 500px;
	        perspective: 500px; /*数值越大越远，数值越小越近*/
}
div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(45deg); background: url(images/circle_inner.png) no-repeat center center; }
div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(45deg); background: url(images/circle_middle.png) no-repeat center center; }
div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(45deg); background: url(images/circle_outer.png) no-repeat center center; }
div > .pig{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/pig.png) no-repeat center center; }
</style>
</head>
<body>
<div>
	<div class="inner"></div>
	<div class="middle"></div>
	<div class="outer"></div>
	<div class="pig"></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	     -o-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-perspective: 500px;
	   -moz-perspective: 500px;
	    -ms-perspective: 500px;
	     -o-perspective: 500px;
	        perspective: 500px; /*数值越大越远，数值越小越近*/
        -webkit-perspective-origin: bottom;
	   -moz-perspective-origin: bottom;
	    -ms-perspective-origin: bottom;
	     -o-perspective-origin: bottom;
	        perspective-origin: bottom;
}
div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(45deg); background: url(images/circle_inner.png) no-repeat center center; }
div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(45deg); background: url(images/circle_middle.png) no-repeat center center; }
div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(45deg); background: url(images/circle_outer.png) no-repeat center center; }
div > .pig{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/pig.png) no-repeat center center; }
</style>
</head>
<body>
<div>
	<div class="inner"></div>
	<div class="middle"></div>
	<div class="outer"></div>
	<div class="pig"></div>
</div>
</body>
</html>

 

   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>backface-visibility</title>
<style type="text/css">
body {
    -webkit-perspective: 800px;
            perspective: 800px;
    -webkit-perspective-origin: 50%;
            perspective-origin: 50%;
}
.cube { display: inline-block; width: 100px; height: 100px; margin: 50px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.cube > div { position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 15px rgba(0, 0, 0, .2); background-color: rgba(255, 255, 255, .1); color: gray; font-size: 20px; line-height: 100px; text-align: center; }
.front {
    -webkit-transform: translatez(50px);
            transform: translatez(50px);
}
.back {
    -webkit-transform: rotatey(180deg) translatez(50px);
            transform: rotatey(180deg) translatez(50px);
}
.right {
    -webkit-transform: rotatey(90deg) translatez(50px);
            transform: rotatey(90deg) translatez(50px);
}
.left {
    -webkit-transform: rotatey(-90deg) translatez(50px);
            transform: rotatey(-90deg) translatez(50px);
}
.top {
    -webkit-transform: rotatex(90deg) translatez(50px);
            transform: rotatex(90deg) translatez(50px);
}
.bottom {
    -webkit-transform: rotatex(-90deg) translatez(50px);
            transform: rotatex(-90deg) translatez(50px);
}
.c1 > div {
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
}
.c2 > div {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="cube c1">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
</div>
<div class="cube c2">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
</div>
</body>
</html>

 

「已注销」
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
120_x轴与y轴平移【transform: translateX(n) translateY(n)】利用定位和变形使元素水平垂直居中
述安的博客
08-26 485
变形就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局。 transform 用来设置元素的变形效果平移（百分比是相对于自身计算的）：以前，在元素宽高确定且开启了定位时，可以用使得元素水平垂直居中，但是很不方便，因为要使等式成立，现在有了变形，则可以利用平移自身的百分比来使得元素水平和垂直居中。...............
CSS3 3D立方体效果示例－transform也不过如此
09-27
CSS3的3D立方体效果是利用`transform`属性实现的一种视觉特效，它极大地扩展了网页设计的可能性，让页面元素可以进行复杂的3D变换。在本文中，我们将深入探讨CSS3的`transform`属性以及与3D变换相关的其他属性，如`...
CSS3伪元素选择器以及2D转换之translate（移动）和rotate（旋转）
kiku
01-17 1910
一、伪元素选择器 1. 伪类选择器 2. 伪类选择器注意事项 before 和 after 必须有 content 属性 before 在内容前面，after 在内容后面 before 和 after 创建的是一个元素，但是属于行内元素 创建出来的元素在 Dom 中查找不到，所以称为伪元素 伪元素和标签选择器一样，权重为 1 3. 代码示例 <div>爱</div>...
大屏幕适配方法之：transform:scale()
最新发布
Mahuicool的博客
05-24 669
CSS3新增的属性transform主要用于设置元素的变形，比如旋转、倾斜、缩放等。我们今天要用到的正式它的缩放功能transform:scale()
[转] css3变形属性transform
weixin_34354173的博客
05-04 221
w3c上的例子是这样子写的：· div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-tra...
CSS3 3D转换--rotate
AsaZyf的博客
11-04 205
rotateX： rotateY：transform：rotateY（angle） rotateZ： rotate3d： 注意点：当x,y,z数值为0或小于0时无效果
CSS：transform顺序问题（translate()+rotate()）
weixin_46585382的博客
04-08 1253
CSS：transform顺序问题（translate()+rotate()）
tween-css-transform:补间 CSS 转换 (matrix3d)
07-02
tween-css-transform 使用 CSS matrix3d()和 4x4 矩阵插值（分解/重组）对 DOM 元素进行matrix3d() 。 这允许平滑范围的 3D 旋转（使用四元数和球面插值）而无需万向... start : 'translateX(10px) rotateX(90deg)' e
CSS3中动画属性transform、transition和animation属性的区别
09-27
在CSS3中，动画属性主要包括`transform`、`transition`和`animation`，它们各自有着独特的功能和应用场景。了解这些属性的区别对于创建动态的、交互式的网页设计至关重要。 **transform属性** `transform`属性主要...
Transform-Css:将 Css 变换转换为 Js，获取 translatescalerotate 的当前变换
06-16
转换-CSS 通过平移/缩放/旋转操作将 Css 转换为对象。 不需要deps。 要使用此库，您需要将 Css 添加到 $.css 或 el.style。 如果在 css 文件中添加，el.style 返回矩阵元素。 使用： new Transform ( obj ) ; 输入...
css转换（transform）
qq_37899792的博客
05-23 1481
一、转换简介 1、什么是转换 改变元素在页面中的大小，位置，角度和形状的一种方式 2、转换分类 ①、2D转换 使元素在x轴和y轴上发生变化效果 ②、3D转换 在2D转换基础上，增加 z轴的变化效果 3、转...
css - 变形位移 translate的使用
m0_64000192的博客
07-31 1410
css-translate的使用
【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-21 3824
一、CSS3 2D 转换 - 位移 / 旋转 / 缩放 二、CSS 2D 转换 - Translate 移动 三、Translate 移动代码示例 1、基本示例 2、脱标测试 ( 百分比平移 ) 四、Translate 百分比移动实现绝对定位的居中效果 1、传统实现方式代码示例 2、百分比移动实现绝对定位的居中效果代码示例
CSS 转换(transform)详解
Bohn的博客
08-26 1386
1.什么是转换     改变元素在页面中的位置，大小，角度以及形状的一种方式。       2D转换:只在x轴和y轴上发生的转换效果       3D转换:增加在z轴的转换效果  2.转换属性     1.转换属性       属性：transform       取值：          1.none 默认值，无任何转换效果          2.transform-function      ...
CSS3转换属性—transform之translate、rotate、scale函数详解
热门推荐
青春木鱼的博客
11-14 1万+
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜、透视等。其中，skew(倾斜)，perspective（透视）不常使用。transform是css3新增的属性，在IE9及以下的浏览器会出现兼容问题，所以要慎用！
css3系列之transform 详解rotate
weixin_30519071的博客
07-31 197
　　rotate 　　rotateX 　　rotateY 　　rotateZ 　　rotate3d rotate： 旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center) 加上 tran...
CSS3变形
m0_72943141的博客
07-28 1361
CSS3变形是一些效果的集合 平移 transform: translate(100px,100px); 旋转 transform: rotate(30deg); 缩放 transform: scale(2); 倾斜 transform: skew(5deg,5deg);
CSS3----转换（旋转）transform
Damys
08-29 4788
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
关于 rotate 和 translate 顺序问题
csdn姚宏波
11-18 1155
元素默认是按照中心点旋转的 旋转90度之后，X和Y轴会交换位置，也就是 X 轴成了 垂直轴，Y轴成了水平轴 所以在元素旋转90度之后，如果希望向下平移元素，应该使用 translateX，而不是 translateY 如下面代码 transform: rotate(90deg) translateX(6px); ...
css3属性transform-origin属性讲解
06-02
CSS3属性transform-origin是用于设置CSS变换的原点位置。它允许您更改元素变换的基准点，从而控制元素在屏幕上的位置。 transform-origin属性可以接受多个值，它们用空格分隔。这些值可以是长度、百分比或关键字。如果只提供一个值，则它被用作水平和垂直方向的相同值。如果提供两个值，则第一个值用作水平方向的值，第二个值用作垂直方向的值。 下面是一些可能的值： - left - center - right - top - bottom - 百分比（例如50%） - 长度（例如20px） 例如，如果您想要将元素向右移动50像素并旋转45度，则可以使用以下代码： ``` transform: translateX(50px) rotate(45deg); transform-origin: left top; ``` 在这个例子中，“left top”指定了变换的原点位置，因此变换将以元素的左上角为中心进行。 总之，transform-origin属性是控制CSS变换的一个非常有用的属性，它可以让您更加灵活地控制元素的变换效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值