css3 中怎样实现div的2d,3d旋转

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 中怎样实现div的2d,3d旋转相关的知识,希望对你有一定的参考价值。

参考技术A translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。

css3怎么让3d旋转的层近大远小

参考技术A <style>
body
-webkit-transform-style: preserve-3d;
//3D模式

perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */

//这里设置perspective和3D模式;


#div

width:300px;height:500px;baxkground:#000;

-webkit-transform:rotatex(45deg);
//尝试旋转查看效果


<sytle>

<body>
<div id="div">

<div>
</body>本回答被提问者和网友采纳

以上是关于css3 中怎样实现div的2d,3d旋转的主要内容,如果未能解决你的问题,请参考以下文章

前端如何实现div在固定角度缩放

css3绘制的图形会不会影响原来的div

学CSS3的3D动画 ——3D旋转—— 妙味课堂

WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能

css3的3d旋转为啥会导致元素变大?

使用纯CSS3实现一个3D旋转的书本