css transform属性

最新推荐文章于 2025-07-06 19:44:27 发布

原创最新推荐文章于 2025-07-06 19:44:27 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

HTML+css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了使用CSS进行3D变换的基本概念和技术细节，包括旋转方向、透视效果、背面隐藏及旋转方位等特性，并提供了多个实例来展示如何实现翻转等动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.旋转的方向

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

rotateX( angle )
rotateY( angle )
rotateZ( angle )

rotate旋转的意思是：rotateX旋转X轴，rotateY旋转Y轴，rotateZ旋转Z轴，angle为角度，单位为beg,如360beg表示旋转360度。

2.`perspective旋转的视角`

中文意思是：透视，视角！perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D.3D看起来是近大远小的，perspective值大于0就是3D效果，小于0就是2D效果。

perspective属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。如下代码示例：

.stage {
    perspective: 600px;
}

以及：

#stage .box {
    transform: perspective(600px) rotateY(45deg);
}

例：

<style>
.container {
  display: block;
  width: 200px;
  height: 200px;
  margin-bottom: 50px;
  border: 1px solid #bbb;
}
.box {
  width: 100%;
  height: 100%;
  opacity: .75;
}

#darkred .box {
  background-color: darkred;
  transform: perspective(600px) rotateY(45deg);
}

#darkblue {
  perspective: 600px;
}
#darkblue .box {
  background-color: darkblue;
  transform: rotateY(45deg);
}
</style>
<body>
<section id="darkred" class="container">
    <div class="box"></div>
</section>

<section id="darkblue" class="container">
    <div class="box"></div>
</section>
</body>
效果是这样的：

3.backface-visibility：

为了切合实际，我们常常会这样设置，使后面元素不可见：backface-visibility:hidden;

4.transform-origin旋转的方位

值可以取bottom从下面开始旋转，left从左边，right从右边

5.transition:all 2s ease 0s

旋转的速度

下面举几个例子：

例一：

<div class="content">
<div class="face1"></div>
<div class="face2"></div>
<style>
.content{
position:absolute;
top:100;
left:100;
width:200;
height:200;
}
.face1{
top:100;
left:100;
width:200;
height:200;
position:absolute;
background:url(images/pocket1.jpg);
border-radius:50%;

}
.face2{
position:absolute;
top:100;
left:100;
width:200;
height:200;
background:url(images/pocket3.jpg);
border-radius:50%;
transform-origin:bottom;
transition:all 2s ease 0s;
}
.face2:hover{
transform:rotateX(360deg);
}
</style>

通过absolute控制两个子div重合，然后实现图片向下翻转功能，效果如下：

例二：

对例一旋转的方向和角度稍作改动:

<div class="content">
<div class="face1"></div>
<div class="face2"></div>
<style>
.content{
position:absolute;
top:100;
left:100;
width:200;
height:200;
}
.face1{
top:100;
left:100;
width:200;
height:200;
position:absolute;
background:url(images/pocket1.jpg);
border-radius:50%;

}
.face2{
position:absolute;
top:100;
left:100;
width:200;
height:200;
background:url(images/pocket3.jpg);
border-radius:50%;
transform-origin:right;
transition:all 5s ease 0s;
}
.face2:hover{
transform:rotateX(180deg);

}
</style>

效果如下：

例三

下面结合js实现定时旋转：

<style>
.one{
width:200;
height:200;
top:100;
left:100;
border-radius:50%;
position:absolute;
}
.me1{
width:200;
height:200;
top:100;
left:100;
border-radius:50%;
position:absolute;
background:url(images/pocket1.jpg);
}

.me2{
width:200;
height:200;
top:100;
left:100;
border-radius:50%;
position:absolute;
background:url(images/pocket3.jpg);
tra
}
</style>
<body>
<div class="one" id="one">
  <div class="me1">hello</div>
   <div class="me2" id="me2" onMouseOver="fun()">你好</div>
</div>
</body>
<script>
var x=0;
function fun(){
	
	me2=document.getElementById("me2");
	me2.style.transformOrigin="bottom";
	me2.style.transition="all 0.1s ease 0s";
	if(x==180) x=0;
	else{
		x=x+20;
	me2.style.transform="rotateX("+x+"deg)";
	}
	setTimeout("fun()",500);
	
}
</script>