CSS元素移动
元素移动
- 2D平面移动
-
- 水平竖直移动
- 旋转
- 3D移动
-
- 3D旋转
- 立体正方体六面为图片
-
- 绕由原点指向某一定点的向量轴旋转
2D平面移动
水平竖直移动
水平竖直移动采用属性：transform中的translate(x,y)
一起设置水平和竖直移动：
transform: translate(x,y);
//单位为像素px
分开设置水平移动和竖直移动
transform: translateX();
transform: translateY();
//单位为像素
旋转
旋转采用属性：transform中的rotate();
transform: rotate();
//单位为角度deg
3D移动
3D旋转
要实现3D的旋转就要在2D的基础上增加透视点
旋转可以选择的轴X,Y,Z
Z轴为垂直屏幕射向用户的方向
X轴为水平轴，Y轴为竖直轴
对应的属性分别为：
transform: rotateX();
transform: rotateY();
transform: rotateZ();
//单位角度deg
透视点属性：perspective
像素值表示距离透视点多少像素，正值靠近，负值远离
perspective: 像素值px;
//单位像素
立体正方体六面为图片
原理：先旋转再增加距离，需要注意的是在旋转的过程中X,Y,Z轴会跟着旋转，所以在旋转后的移动轴的选择还是需要一定空间想象能力的。
围绕X,Y,Z三轴的旋转
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
body{
/*设置透视点*/
perspective: 1000px;
}
.lifangti{
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
/*设置保留子元素的3D效果*/
transform-style: preserve-3d;
}
.page{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
/*透明度*/
opacity: 0.6;
}
.front{
background-image: url("CSS_img/V3.png");
background-size: 100% auto;
transform: translateZ(100px);
}
.back{
background-image: url("CSS_img/V1.png");
background-size: 100% auto;
transform: translateZ(-100px);
}
.right{
background-image: url("CSS_img/V2.png");
background-size: 100% auto;
transform: rotateY(90deg) translateZ(100px);
/*轴跟着旋转而旋转*/
}
.left{
background-image: url("CSS_img/V4.png");
background-size: 100% auto;
transform: rotateY(-90deg) translateZ(100px);
/*轴跟着旋转而旋转*/
}
.top{
background-image: url("CSS_img/V5.png");
background-size: 100% auto;
transform: rotateX(90deg) translateZ(100px);
/*轴跟着旋转而旋转*/
}
.bottom{
background-image: url("CSS_img/V6.png");
background-size: 100% auto;
transform: rotateX(90deg) translateZ(-100px);
/*轴跟着旋转而旋转*/
}
style>
head>
<body>
<div class="lifangti">
<div class="page front">div>
<div class="page back">div>
<div class="page left">div>
<div class="page right">div>
<div class="page top">div>
<div class="page bottom">div>
div>
body>
html>
效果：
绕由原点指向某一定点的向量轴旋转
设置原点指向某一定点的向量：
transform: rotate3d(x,y,z,角度);
所有代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
body{
/*设置透视点*/
perspective: 1000px;
}
.lifangti{
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
/*设置保留子元素的3D效果*/
transform-style: preserve-3d;
transition: all 2s;
}
.lifangti:hover{
transform: rotate3d(1,1,1,180deg);
}
.page{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
/*透明度*/
opacity: 0.6;
}
.front{
background-image: url("CSS_img/V3.png");
background-size: 100% auto;
transform: translateZ(100px);
}
.back{
background-image: url("CSS_img/V1.png");
background-size: 100% auto;
transform: translateZ(-100px);
}
.right{
background-image: url("CSS_img/V2.png");
background-size: 100% auto;
transform: rotateY(90deg) translateZ(100px);
/*轴跟着旋转而旋转*/
}
.left{
background-image: url("CSS_img/V4.png");
background-size: 100% auto;
transform: rotateY(-90deg) translateZ(100px);
/*轴跟着旋转而旋转*/
}
.top{
background-image: url("CSS_img/V5.png");
background-size: 100% auto;
transform: rotateX(90deg) translateZ(100px);
/*轴跟着旋转而旋转*/
}
.bottom{
background-image: url("CSS_img/V6.png");
background-size: 100% auto;
transform: rotateX(90deg) translateZ(-100px);
/*轴跟着旋转而旋转*/
}
style>
head>
<body>
<div class="lifangti">
<div class="page front">div>
<div class="page back">div>
<div class="page left">div>
<div class="page right">div>
<div class="page top">div>
<div class="page bottom">div>
div>
body>
html>