css旋转
对css3的旋转问题,我认为直接可以从transform中:rotateX, rotateY, rotateZ去了解认识,
那样我们会很清晰直观的接触到它
顾名思义rotateX即绕着x轴旋转,剩余两个⼀样
下来我会以绕y轴旋转举例
⾸先是⼀些常规操作,接着准备好你要旋转的东西,我以旋转照⽚说明,
因为我要旋转四个照⽚,故⽽我写了四个 li。
再接着选择器,该做的⼀些准备先给他做好
然后把⽗容器做好,再对要旋转的照⽚选择⼀个进⾏书写样式,注意要写进
transform-style:prerve-3d,当然旋转时间、相对定位也不能忘记,
接下来给li添加绝对定位,然后给确定照⽚的旋转类型,当然我选择rotateY,即绕y轴旋转,接着确定好⾓度以及⼤⼩,
然后加动画效果并且给定范围
接下来千万别忘了给⽗容器⾥加好观察位置
然后检查⾃⼰的要旋转的照⽚在不在当前选择的⽂件夹,确认⽆误,检查⾃⼰写的样式和代码⽆误,最后再运⾏。
好了,给⼤家看⼀下完整的代码以及运⾏效果。
我是《逆战班》的幻⼩梦同学,粗鄙之见请多多包含。