rotate3d()
rotate3d()
Html5知典
发布于 2019-11-26 09:09:18
发布于 2019-11-26 09:09:18
代码可运行
运行总次数：0
代码可运行
用途
rotate3d 规定3D 旋转。
语法
rotate3d(x,y,z,angle)值
值 | 描述 |
|---|---|
x | 规定围绕X轴旋转的矢量值。 |
y | 规定围绕Y轴旋转的矢量值。 |
z | 规定围绕Z轴旋转的矢量值。 |
<angle> | <angle>代表旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。 |
例子
/* HTML */
<div class="stage"> <div class="box"></div> </div>
/* CSS */
.stage{
width:100px;
height:100px;}
.box {
width:50px;
height:50px;
background:red;
animation:flipAround 4s infinite;
transform-origin:right; }
@keyframes 'flipAround' {
25% {
transform-origin:right;
animation-mode:forwards;
transform:rotateY(-180deg); }
25.001% {
transform-origin:bottom;
transform:translateX(50px); }
50% {
transform-origin:bottom;
transform:translateX(50px) rotateX(-180deg); }
50.001% {
transform-origin:left;
transform:translateX(50px) translateY(50px); }
75% {
transform-origin:left;
transform:translateX(50px) translateY(50px) rotateY(180deg); }
75.001% {
transform-origin:top;
transform:translateY(50px); }
100% {
transform-origin:top;
transform:translateY(50px) rotateX(180deg); }
}本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2018-10-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
