角度旋转
rotateX：默认以center绕x轴旋转
rotateY：默认以center绕y轴旋转
rotateZ：默认以cente绕z轴r旋转
//rotateX原点为center==》正值(顶部)远离屏幕，负值(顶部)接近屏幕 //rotateX原点为top==》正值(底部)接近屏幕，负值(底部)远离屏幕 //rotateX原点为bottom==》正值(顶部)远离屏幕，负值(顶部)接近屏幕 //rotateY原点为center==》正值(左侧)接近屏幕，负值(左侧)远离屏幕 //rotateY原点为left==》正值(右侧)远离屏幕，负值(右侧)接近屏幕 //rotateY原点为right==》正值(左侧)接近屏幕，负值(左侧)远离屏
距离位移
translateX：以x轴为基准移动，右为正值
translateY：以y轴为基准移动，上为正值
translateZ：以z轴为基准移动，靠近屏幕为正值
旋转中心
transform-origin：top//绕着y轴的顶部进行旋转
transform-origin: x-axis y-axis z-axis;//第三个参数可以不写 x-axis：left、center、right、length、% y-axis：top、center、bottom、length、% z-axis：length
透视
1、透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
2、透视是加给父盒子的
3、透视的值表示是2D平面距离屏幕的距离
perspective: 100px;//只有父盒子有此属性
3D呈现
1、只有规定了3d呈现方式为3d才会有显示效果
2、preserve-3d属性是加给父盒子的
transform-style: flat;//所有子元素在 2D 平面呈现 transform-style: preserve-3d;//保留3D空间
背面可见
backface-visibility: hidden;//背部隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 300px; height: 300px; margin-top: 10px; margin-left: 100px; float: left; border: 1px solid #ccc; perspective: 100px; } .box > div { text-align: center; width: 150px; height: 150px; margin: 30px auto; background-color: blue; transition: all 1s; } .box:nth-child(1) div:hover { transform: rotateX(360deg); } .box:nth-child(2) div:hover { transform: rotateY(360deg); } .box:nth-child(3) div:hover { transform: rotateZ(360deg); } .box:nth-child(4) div:hover { transform: translateX(300px); } .box:nth-child(5) div:hover { transform: translateY(300px); } .box:nth-child(6) div:hover { transform: translateZ(50px); } </style> </head> <body> <div class="box"> <div>rotateX</div> </div> <div class="box"> <div>rotateY</div> </div> <div class="box"> <div>rotateZ</div> </div> <div class="box"> <div>translateX</div> </div> <div class="box"> <div>translateY</div> </div> <div class="box"> <div>translateZ</div> </div> </body> </html>
