DAY02 动画,立体旋转,空间转换,立体呈现和缩放

        哈哈今天出奇早,课程内容不是很多,有很多的自习时间.有更多的时间来写写今天的心得,希望能给大家带来收获

        首先得来了解一下空间的结构,怎么让2D的平面显示3D的效果,首先得需要有2张定位重合的盒子,设定好宽高与颜色,根据昨天学习的transform:translate,使用transform:translateZ来进行位移,想象在两个盒子中间有一张纸,然后利用Z轴将他撑开,如果需要200PX,那么就一个移动一半

.在两个盒子里面设置

.front {

            background-color: orange;

            transform: translateZ(100px);

.back {

            background-color: green;

            transform: translateZ(-100px);

        }

这样盒子就撑开了 然后关键来了.需要将2D转换为3D,在父盒子里面输入

transform-style: preserve-3d;

这样就完成了,设置一下

记得

利用hover来看触摸就可以啦

.box:hover {

            transform: rotateY(360deg);

        }

如果感觉不直观 可以利用perspective: 400px;属性来看

接下来学习了动画, 这个是非常有意思的

也非常简单

@keyframes 动画名称 {
    from{}
    to{}
}
@keyframes 动画名称{
    0%{}
    25%{}
    50%{}
    100%{}
    百分比随便打 可多可少
}
操作完成后
再使用动画
box{
    ainimation : 写上动画名称,空格隔开  
}

好啦今天分享就这么多了 时间不多了,感觉总结起来怕写长了 但是又有很多东西没有写,啊,如果有好的建议还希望多指点,有点无语轮次