css3可以做3d的效果吗
时间:2022-06-16
来源:互联网
在手机上看
手机扫描阅读
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; height:75px; 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; height:75px; 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-06-26
-
新三国志曹操传阵营怎么选-四大阵营选择 时间:2025-06-26
-
无畏契约源能行动需要多大内存-手机配置要求详解 时间:2025-06-26
-
无畏契约源能行动需要多大内存-手机配置要求详解 时间:2025-06-26
-
起床:每天上演的《人床分离》大戏。 时间:2025-06-26
-
LINK币空投平台及交易所详情 时间:2025-06-26
今日更新
-
node都是单线程运行的吗
阅读:18
-
node可以开启多线程吗
阅读:18
-
xmp是html5新增标签吗
阅读:18
-
html5怎么取消边框
阅读:18
-
src可以在HTML5出现吗
阅读:18
-
抖音商城怎么取消显示在主页
阅读:18
-
coloros12开发者模式在哪开启
阅读:18
-
coloros12如何查看内存大小
阅读:18
-
coloros12怎么添加桌面卡片
阅读:18
-
网易云音乐查看本周听歌时长教程分享
阅读:18