transform3d
/* transform: translateX(100px);
transform: translateY(100px);
transform: translateX(100px) translateY(100px) translateZ(100px); */
/* translateZ沿着Z轴移动 */
/* translateZ后面的单位我们一般跟px; */
/* translateZ(100px)向外移动100px,(向我们的眼睛来移动) */
/* 3D移动有简写的方法 */
/* transform: translate3d(x, y, z); */
/* xyz不能省略,如果不要就写0 */
body{
/* 透视写在被观察盒子的父盒子上面 */
perspective: 500px;
}
div{
width: 200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px);
transform: translateY(100px);
transform: translateX(100px) translateY(100px) translateZ(100px); */
/* translateZ沿着Z轴移动 */
/* translateZ后面的单位我们一般跟px; */
/* translateZ(100px)向外移动100px,(向我们的眼睛来移动) */
/* 3D移动有简写的方法 */
/* transform: translate3d(x, y, z); */
/* xyz不能省略,如果不要就写0 */
transform: translate3d(400px, 100px, 100px);
}
rotate3d
/* transform: rotateX(180deg); */
/* transform: rotate3d(x, y, z, deg); */
/* 沿x轴 */
/* transform: rotate3d(1, 0, 0, 45deg); */
/* 矢量和 以下为45度轴旋转*/
body{
perspective: 500px;
}
img{
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover{
/* transform: rotateX(180deg); */
/* transform: rotate3d(x, y, z, deg); */
/* 沿x轴 */
/* transform: rotate3d(1, 0, 0, 45deg); */
/* 矢量和 以下为45度轴旋转*/
transform: rotate3d(1, 1, 0, 45deg);
}