css3可以做3d的效果吗
时间:2022-06-16 来源:互联网 标签: CSS3
css3可以做3d的效果吗,对于css3可以做3d的效果吗许多的网友还不是很了解,下面小编给大家带来css3可以做3d的效果吗介绍,感兴趣的小伙伴快来看看吧!
本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。
css3做3d效果
CSS3 允许您使用 3D 转换来对元素进行格式化。
3D 转换方法:
rotateX()
rotateX()方法,围绕其在一个给定度数X轴旋转的元素。
示例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> div { width:100px; background-color:red; border:1px solid black; } div#div2 { transform:rotateX(120deg); -webkit-transform:rotateX(120deg); /* Safari and Chrome */ } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body> </html>
输出结果:
rotateY()
rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。
示例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> div { width:100px; background-color:red; border:1px solid black; } div#div2 { transform:rotateY(130deg); -webkit-transform:rotateY(130deg); /* Safari and Chrome */ } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body> </html>
输出结果:
以上就是css3可以做3d的效果吗的详细内容,更多请关注php爱好者其它相关文章!
相关阅读更多 +
-
睡午觉是什么梗 揭秘年轻人午睡文化的搞笑内涵和流行原因 2025-10-08
-
顺飞是什么梗揭秘网络热词背后的搞笑来源和流行原因 2025-10-08
-
顺丰梗是什么梗指网友调侃顺丰快递神速的幽默段子,成为快递界热门话题 2025-10-08
-
顺溜的梗是什么梗 揭秘网络热词顺溜的搞笑出处和用法 2025-10-08
-
无限暖暖联机功能怎么用说明-日常活动联机推荐解析 2025-10-08
-
恋与全新羁绊许墨·阈限心率限时上架-限时活动将开启 2025-10-08
最近更新