HTML5+CSS3(3)

3D

简称3维坐标系 比二维坐标系多一个Z轴

HTML5+CSS3(3)_第1张图片

3D位移

3D位移在2D的基础上多一个可移动的Z轴
  transform: translate3d(x,y,z);




    
    
    Document
    



    

HTML5+CSS3(3)_第2张图片
注意事项

  • x轴 Y轴一般用px 百分比来当作单位。
  • Z轴一般用px做单位 必须借助透视功能。
  • z轴向外移动一般是正值,向内移动是负值。

perspective

特点

  • 透视是视距,单位为px
  • 近大远小,透视写在被观察元素的父元素上。
  • 透视的单位越大,看到的物品就越小,透视的单位越小,看到的物品就越大。
  • 在透视固定的情况下,z轴越大,看到的物品就越大,z轴越小,看到的物品就越小。

HTML5+CSS3(3)_第3张图片

在这张图中,d为透视,位于人的眼睛和被观察物体的中间,即近大远小





    
    
    Document
    



    

HTML5+CSS3(3)_第4张图片

3D旋转

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

rotateX

左手弯曲的手指方向即为x轴的正方向

HTML5+CSS3(3)_第5张图片





    
    
    Document
    




    



HTML5+CSS3(3)_第6张图片

rotateY

左手手指弯曲的方向即为y轴的正方向

HTML5+CSS3(3)_第7张图片





    
    
    Document
    



    


HTML5+CSS3(3)_第8张图片

rotateZ

HTML5+CSS3(3)_第9张图片





    
    
    Document
    



    


HTML5+CSS3(3)_第10张图片

简写

  • transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
  • transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg
 transform:rotate3d(x,y,z,deg)




    
    
    Document
    



    



HTML5+CSS3(3)_第11张图片

transform-style

transform:preserve-3d 让子元素保持3d空间环境




    
    
    Document
    



    

HTML5+CSS3(3)_第12张图片

案例

两面反转的盒子

思路

  • 先准备一个大盒子 里面装着两个小盒子
  • 使用定义,让其中的一个盒子翻转180deg




    
    
    Document
    



    
尧子陌
临风笑却世间

HTML5+CSS3(3)_第13张图片

3d导航栏案例





    
    
    Document
    



    
  • hello
    尧子陌
  • hello
    尧子陌

HTML5+CSS3(3)_第14张图片

旋转木马

  • 分析如下:给body设置透视 给div的父元素设置3d效果
  • 把每个盒子摆放到正确的位置 利用动画即可




    
    
    Document
    



    

HTML5+CSS3(3)_第15张图片

浏览器私有前缀

HTML5+CSS3(3)_第16张图片

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