1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style : preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点(transform-origin: left center;)(transform-origin: 50px 50px)
11、backface-visibility 设置盒子背面是否可见
.box,.box2,.box3,.box4{
width: 200px;
height: 200px;
background-color: gold;
margin: 50px auto 0;
transition: all 1s ease;
}
.box:hover{
/*box的动画不会影响到box2*/
/*位移*/
transform: translate(50px,50px);
}
.box2:hover{
/*沿Z轴旋转360度*/
transform: rotate(360deg);
}
.box3:hover{
/*缩放*/
transform: scale(0.5,0.2);
}
.box4:hover{
/*斜切*/
/*transform: skew(45deg,0);*/
transform: skew(0,45deg);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素旋转</title>
<style type="text/css">
/*旋转方向判断
1、X轴向右、Y轴向下、Z轴向屏幕外
2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/
.box{
width: 300px;
height: 300px;
background-color: gold;
margin: 50px auto 0;
transition: all 500ms ease;
/*设置盒子按3D空间显示*/
transform-style: preserve-3d;
transform: perspective(800px) rotateY(0deg);
}
.box:hover{
/*默认沿Z轴旋转*/
/*transform: rotate(45deg);*/
/*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
/*transform: perspective(800px) rotateX(45deg);*/
transform: perspective(800px) rotateY(-45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
网友评论