关于CSS3的3D效果样式transform属性中的rotate3d

1.介绍

在css3中新加了一些3d特效，如translate3d,scale3d，rotate3d，与css3中的2d特效最大的区别就是多了个z轴，因此才有了3d效果。因为scale3d(x,y,z)等价于scaleX(x),scaleY(y),scaleZ(z)分别对x，y, z坐标值进行缩放，比较容易理解，translate3d平移也是类似，比较简单，这里就不就介绍了，详细请参考http://www.w3school.com.cn/或菜鸟教程等网站。

本文主要详细介绍不大容易理解的rotate3d属性，

2.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#p1{perspective: 500px;}#p2 {width: 200px;height: 200px;margin: 250px auto;background: black;transition: 1s;font-size: 50px;color: white;}#p2:hover {transform: rotate3d(20, 0, 0, 45deg);}</style>
</head>
<body>
<div id="p1"><p id="p2">df</p>
</div>
</body>
</html>

perspective是透视距，写在父元素，以获得更好的3d效果，transition是过渡时间，transform是样式转换。

通过总结：发现rotate3d(20,0,0,45deg)，其实就是从原点指向(20,0,0)这个点构成一个方向轴，然后根据左手定则，四指指向方向为旋转方向，旋转45度。因此这样就很好解释了rotate3d（x,y,z,deg）属性，由原点指向(x,y,z)成方向轴，然后左手定则，确定旋转方向，进行相应的角度旋转，得到特效结果。

注释：

css3里的3d坐标轴：z轴垂直电脑屏幕指向你，y轴在电脑屏幕垂直朝下，x轴在电脑屏幕水平向右

左手定则：类似物理当中的左手定则，大拇指指向旋转方向轴正方向，四指环绕紧握，四指指向为元素旋转方向

旋转原点：一般指向元素正中心，当然你可以设定旋转元素上设置样式transform-origin进行相应更改

关于CSS3的3D效果样式transform属性中的rotate3d相关推荐

html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
css3制作正方体,利用CSS3的3D效果制作正方体
学会用css3的3d效果制作一个正方体,有助于增强我们对3d场景的旋转和位移属性的理解.下面的动态图就是利用3d旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
css3实现3d效果的立方体动画
纯css3动画写的立方体动画,还是蛮简单的,完整的效果如下: 首先,在html弄6个面 <div id="wrapper"><ul><li>&l ...
在css中用3D效果实现图片墙,CSS3实现3D效果的图片墙_html/css_WEB-ITnose
先来看一下效果:http://1.huizit1.applinzi.com/CSS/transform_3D/img_3D.html 布局结构: CSS3中新增了translate-style和per ...
自己做得一个用于直观观察css3 transform属性中的rotate 3D效果
这段代码还是非常简单,是看了一个老师的视频受的启发,也是调用了很多个函数,所以比较杂乱吧! <!DOCTYPE html> <html lang="en"> ...
如何使用CSS3实现3D效果
一. 设置一个立方体非常简单首先需要在最外层的div设置perspective:800px;的查看位置视图,这里建议在1000px左右,不然可能会出现拉伸变型. 使用transform-style: ...
CSS3实现3D立体效果
CSS3实现3D效果 1. 涉及到的几个CSS3属性首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...
html如何实现立体效果,CSS3实现3D立体效果
CSS3实现3D效果 1. 涉及到的几个CSS3属性首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...
玩转CSS3的3D动画效果
效果展示基础知识 transform-style:启用 3D 模式要利用 CSS3 实现 3D 的效果,最主要的就是借助 transform-style 属性.transform-style 只有 ...

关于CSS3的3D效果样式transform属性中的rotate3d

关于CSS3的3D效果样式transform属性中的rotate3d相关推荐

最新文章

热门文章