css3 2D和3D旋转效果

最新推荐文章于 2023-07-12 13:35:10 发布
最新推荐文章于 2023-07-12 13:35:10 发布
阅读量2.8k 收藏
点赞数
分类专栏： css3 web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao_jun_0820/article/details/20740729
版权 
<!DOCTYPE html>
<html>
<head>
<style> 
.animated_div {
width: 100px;
height: 80px;
color: blue;
position: relative;
font-weight: bold;
padding: 20px 10px 0px 10px;
float: left;
margin: 20px;
margin-right: 50px;
border: 1px solid #888888;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
background-color:green;
}
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#rotatey1
{
transform:rotateY(120deg);
-webkit-transform:rotateY(120deg); /* Safari and Chrome */
-moz-transform:rotateY(120deg); /* Firefox */
}
</style>
</head>
<body>

<p οnclick="rotateDIV()" id="rotate1" class="animated_div" style="-webkit-transform: rotate(360deg);">2D 旋转</p>
<p οnclick="rotateYDIV()" id="rotatey1" class="animated_div" style="-webkit-transform: rotateY(180deg);">3D 旋转</p>

</body>
</html>
<script>
<!--
var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
x=document.getElementById("rotate1")
clearInterval(rotINT)
rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
y=document.getElementById("rotatey1")
clearInterval(rotYINT)
rotYINT=setInterval("startYRotate()",10)
}
function startRotate()
{
n=n+1
x.style.transform="rotate(" + n + "deg)"
x.style.webkitTransform="rotate(" + n + "deg)"
x.style.OTransform="rotate(" + n + "deg)"
x.style.MozTransform="rotate(" + n + "deg)"
if (n==180 || n==360)
	{
	clearInterval(rotINT)
	if (n==360){n=0}
	}
}
function startYRotate()
{
ny=ny+1
y.style.transform="rotateY(" + ny + "deg)"
y.style.webkitTransform="rotateY(" + ny + "deg)"
y.style.OTransform="rotateY(" + ny + "deg)"
y.style.MozTransform="rotateY(" + ny + "deg)"
if (ny==180 || ny>=360)
	{
	clearInterval(rotYINT)
	if (ny>=360){ny=0}
	}
}
//-->
</script>


 

浏览器支持

属性 浏览器支持
transform          

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

 

xiao_jun_0820
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 2D转换
技术的搬运工
01-23 1413
在二维空间下对元素进行移动、缩放、转动、拉长或拉伸。
纯CSS3制作3D旋转球体
11-04
总结来说，纯CSS3制作3D旋转球体涉及的关键知识点有：`transform`属性、`rotateX`和`rotateY`用于3D旋转、`perspective`定义观察者视角、`animation`实现动态效果以及`border-radius`创建圆形。通过巧妙地组合这些...
web前端之CSS3（3）：2D和3D转换
薛定谔的猫-前端领域
05-11 1096
CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。 2D 转换 以下列出了所有的转换属性: Property 描述 CSS transform 适用于2D或3D转换的元素 3 transform-origin 允许您更改转化元素位置 3 transform属性2D变换方法： translate()：根据左(X轴)和顶部(Y轴...
css2d旋转
qq_43327962的博客
03-23 471
css2d旋转 目录 translate() rotate() scale() skew() matrix() translate()方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。实例如下： div { transform: translate(50px,100px); -ms-tra...
css3 2D转换（transform）
我不想说
09-19 304
transform是css3的属性，向元素应用2d或3d转换，可以运行元素移动，旋转，倾斜，伸缩 translate()方法 位移 单位px 三种参数方式：translate(x,y) x轴y轴同时移动 translateX(x) 仅x轴移动 translateY(y) 仅y轴移动 div { transform: translate(50px,100px); -ms-transf...
2d旋转和3d旋转css_CSS 2D转换：旋转
cungui5726的博客
08-18 237
2d旋转和3d旋转cssProbably the most useful of the transformations, rotate does exactly what it says on the tin: it rotates any element. The browser should not assume the unit of measurement used, so it need...
js+css3图片3D旋转轮播特效
06-09
"js+css3图片3D旋转轮播特效"就是一个结合JavaScript与CSS3技术，为网站焦点图提供立体旋转切换效果的实例。这种特效可以使得网站的图像展示更加生动，增加用户的交互体验。 首先，我们来了解一下CSS3。CSS3是层叠...
旋转的正方体css3制作3D立体效果
09-08
CSS3的`transform`属性允许我们对元素进行2D和3D的变换，如旋转、缩放、平移等。对于3D变换，我们需要使用`transform-style: preserve-3d;`属性，这确保了子元素在3D空间内保持它们的3D结构，而不是扁平化。 接下来...
CSS3制作3D骰子旋转动画特效
06-24
在本教程中，我们将深入探讨如何使用CSS3创建一个3D骰子旋转动画特效，这是一种交互式的视觉效果，用户可以通过鼠标移动来控制正方体的旋转。CSS3是层叠样式表的最新版本，它引入了许多强大的新特性，包括3D变换和...
CSS3 2D模拟实现摩天轮旋转效果
01-19
先看效果图： 由于上传的大小原因，只能录制成这种效果，原图是无限循环的转圈。 代码： <span xss=removed><!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>模拟...
鼠标拖动2D图片，呈现360°旋转3D动画效果
11-23
鼠标拖动2D，PNG图片，呈现360°旋转的，3D动画效果。
css2d之旋转小风车
yuxiaoc的博客
08-19 193
<head> <meta charset="UTF-8"> <title>小风车</title> <style> .parent { width: 600px; height: 600px; margin: 0 auto; position: relative; } section
CSS2D旋转、过渡、动画
weixin_30808575的博客
07-13 195
2D转换： 位移： -webkit-transform:translate( ); 缩放： -webkit-transform：scale(.像素,.像素); 旋转： -webkit-transform：rotate(45deg); -webkit-transform-origin:x px,y px; 斜切： -webkit-transform：s...
【CSS3】CSS3 2D 转换 - rotate 旋转 ( transform: rotate(90deg) 旋转样式 | transition 过度效果设置 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-21 2107
一、CSS3 2D 转换 - rotate 旋转 二、代码示例 1、未旋转状态 2、旋转示例 - transition 过度效果设置
css之2d缩放和旋转
m0_65354547的博客
07-12 115
scale（参数1,参数2）；沿着水平放大缩小x倍，沿着垂直方向放大缩小y倍。对元素进行旋转，取值使用度数（deg），正值为顺时针，负值为逆时针。旋转基本语法：transform：routate（）scaleX（参数）：沿着垂直方向放大缩小y倍。rotate（参数）：围绕元素的正中心进行旋转。scale（参数）：沿着x轴y轴放大缩小n倍。scaleX（参数）：沿着水平放大缩小x倍。rotateX（参数）：围绕x轴进行旋转。rotateY（参数）：围绕y轴进行旋转。对元素进行水平或垂直方向的缩放。
css3 动画之 2D旋转 3D旋转 放大
BuptMelody的专栏
05-30 3036
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
【CSS】2d转换旋转、缩放、倾斜
LuWeien的博客
12-01 420
2d旋转 transform
css3值2d旋转
极北三少
11-02 739
今天，我们来讲解一下2d选中的相关内容！ 讲解2d旋转之前，首先来讲解一下2d旋转的标签。 transform  用来设置2d旋转的载体。用法：transform:skew();等等 下面，我们来讲解一些transform有哪些方法： 1.translate(x,y)：定义 2D 转换，沿着 X 和 Y 轴移动元素。（translateX(n)，translateY(n）该方法是可以拆
CSS3中的2D转换（位移、旋转、缩放）
ItDaChuang的博客
09-26 1701
以案例的形式展现CSS3中的2D转换，包含位移translate/旋转rotate/缩放scale的相关知识和特点。
css3 3d 轮播
最新发布
10-23
CSS3 3D 轮播是一种通过 CSS3 技术实现的网页轮播效果，与传统的2D轮播相比，它可以在网页中创建出更加生动和具有立体感的轮播效果。 CSS3 3D 轮播原理是利用 CSS3 的 transform 属性，通过给定元素的旋转和平移等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值