Css3 3D转换

时间：2018-11-03 12:30:58 阅读：984 评论：0 收藏：0 [点我收藏+]

标签：隐藏 top flat ble sla enter jpg style 移动

2D空间和3D空间

　　2D：x 、y

　　3D：x、y、z

可以使用transform属性将HTML元素在3D空间内

一个就简单的例子

<div>
    <img src="lufei.jpg">
</div>



@-webkit-keyframes rotate{
  100%{transform:rotate(60deg);}
}

img{
  -webkit-animation-name:rotate;
  -webkit-animation-durction:2s;
}

这样的话图片只是变扁了，看不到透视效果，想要看到透视效果需要在父元素上加上perspective属性，也就是说把这个div看作一个3D画面

perspective：1000px；视点和3D画面的距离，距离越小透视就越明显。

<div>
    <img src="lufei.jpg">
</div>

div{
  perspevtive:500px;
}

@-webkit-keyframes rotate{
  100%{transform:rotate(60deg);}
}

img{
  -webkit-animation-name:rotate;
  -webkit-animation-durction:2s;
}

perspective-origin：right top；改变视点的位置

<div>
    <img src="lufei.jpg">
</div>

div{
  perspevtive:500px;
  perspective-origin:right top;
}

@-webkit-keyframes rotate{
  100%{transform:rotate(60deg);}
}

img{
  -webkit-animation-name:rotate;
  -webkit-animation-durction:2s;
}

transform-origin;x y z; 旋转的基准点

<div>
    <img src="lufei.jpg">
</div>

div{
  perspevtive:500px;
}

@-webkit-keyframes rotate{
  100%{transform:rotate(60deg);}
}

img{
  -webkit-animation-name:rotate;
  -webkit-animation-durction:2s;
  transform-origin:center center 100px;
}

backface-visibility:设置元素背面是否可见，默认visible

<div>
    <img src="lufei.jpg">
</div>

div{
  perspevtive:500px;
}

@-webkit-keyframes rotate{
  100%{transform:rotate(60deg);}
}

img{
  -webkit-animation-name:rotate;
  -webkit-animation-durction:2s;
  transform-origin:center center 100px;
  backface-visibility：hidden；     背面隐藏
}

3D旋转（rotate3D）

rotate3D（1，1，1，360deg）；

　　前三个参数是在3维空间中的一个点x轴1，y轴1 z轴1 ，后面的360deg是围绕这个这个点360°旋转

3D移动（translate3D）

3D缩放（scale3D）

transform-style：

　　flat：默认值，子元素将不保留其3D位置

　　preserver-3D：子元素将保留其3D位置。

Css3 3D转换

标签：隐藏 top flat ble sla enter jpg style 移动

原文地址：https://www.cnblogs.com/xiaowie/p/9900167.html

踩

(1)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

Css3 3D转换

2D空间和3D空间

2D：x 、y

3D：x、y、z

可以使用transform属性将HTML元素在3D空间内

一个就简单的例子

这样的话 图片只是变扁了，看不到透视效果，想要看到透视效果需要在父元素上加上perspective属性，也就是说把这个div看作一个3D画面

perspective：1000px； 视点和3D画面的距离，距离越小透视就越明显。

perspective-origin：right top；改变视点的位置

backface-visibility:设置元素背面是否可见，默认visible

3D旋转（rotate3D）

rotate3D（1，1，1，360deg）；

前三个参数是在3维空间中的一个点x轴1，y轴1 z轴1 ，后面的360deg是围绕这个这个点360°旋转

3D移动（translate3D）

3D缩放（scale3D）

transform-style：

flat：默认值，子元素将不保留其3D位置

preserver-3D：子元素将保留其3D位置。

　　2D：x 、y

　　3D：x、y、z

这样的话图片只是变扁了，看不到透视效果，想要看到透视效果需要在父元素上加上perspective属性，也就是说把这个div看作一个3D画面

perspective：1000px；视点和3D画面的距离，距离越小透视就越明显。

　　前三个参数是在3维空间中的一个点x轴1，y轴1 z轴1 ，后面的360deg是围绕这个这个点360°旋转

　　flat：默认值，子元素将不保留其3D位置

　　preserver-3D：子元素将保留其3D位置。