CSS—2D和3D属性

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画练习</title>
    <link rel="stylesheet" type="text/css" href="annimation.css">
</head>
<body>
      <p><div>萌萌哒德鲁伊</div></p>
      <p><div class="annimation">萌萌哒德鲁伊</div></p>
      <p><div class="annimation2">萌萌哒德鲁伊</div></p>
      <p><div class="annimation3">萌萌哒德鲁伊</div></p>
      <p><div class="annimation4">萌萌哒德鲁伊</div></p>
      <p><div class="annimation5">萌萌哒德鲁伊</div></p>
      <p><div class="annimation6">萌萌哒德鲁伊</div></p>
</body>
</html>

CSS代码

div{
    width: 150px;
    height: 100px;
    background-color: cornflowerblue;
}
.annimation{
    transform: translate(300px,-100px);
}
/*transfrom:translate第一个属性,向右移动,第二个属性向下移动,
这里可能别的浏览器需要特别指定,详细再百度,这里我的charome直接能显示*/
.annimation2{
    margin-top: -65px;
    transform: rotate(25deg);
}
/*rotate旋转效果,edg表示角度单位*/
.annimation3{
    margin-top: 130px;
    margin-left: 50px;
    transform:scale(1.5,2.5);
}
/*scale缩放效果,第一个属性控制宽度倍数,第二个属性控制高度倍数*/
.annimation4{
    margin-top: 120px;
    transform:skew(15deg,25deg);
}
/*shew控制倾斜,左下点建立坐标系,第一个属性,Y轴往左15度,第二个属性X轴往右25度*/

/*上面的是2D的效果,下面的是3D的动画效果*/
.annimation5{
    /*transform: translate(300px,200px);*/
    /*这样写,是从默认的位置出发,而不是起始位置,最页面的最后面*/
    transform: translate(300px,-500px);
    /*transform: rotateX(200deg);*/
}
.annimation6{
    transform: translate(300px,-400px);
    /*transform: rotateY(200deg);*/
}

效果:

3D效果没有注释前运行效果

3D效果添加之后,为什么2D的平移效果没了?

HTML关于3D方面,可看此人文章https://www.w3cplus.com/css3/things-watch-working-css-3d.html

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值