css3(3D转换)快来一起学习吧

空间转换

属性:transform 可以实现平移、缩放、旋转(也叫3D转换)

X、Y、Z轴方向的确认

  1. X:沿着屏幕从左往右即是X轴正方向
  2. Y:沿着屏幕从上往下即是Y轴正方向
  3. Z:沿着屏幕从里往外即是Z轴正方向

左手法则:判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

视距(perspective)

属性:perspective

取值:像素单位数值, 数值一般在800 – 1200px

用法:为转换元素的父盒子添加,可达成近大远小

透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。

平移

transform:translate3D(X,Y,Z)

transform:translateX

transform:translateY

transform:translateZ

缩放

缩放同平面缩放基本一样,只不过是增加了一个视距属性,在立体环境下会近大远小

旋转

  • transform: rotateZ(值);
  • transform: rotateX(值);
  • transform: rotateY(值);

同时需要给父盒子添加transform-style:preserve-3d才能使得子盒子处于立体空间

(perspective只增加近大远小、近实远虚的视觉效果)

旋转综合案例





    
    
    
    Document
    



    
首页
index
登录
login
注册
register




    
    
    07-立方体.html
    



    

你可能感兴趣的:(前端,css3)