全栈(一)

元素旋转、变形中心点、背面可见、图片翻面

2019-12-21  本文已影响0人  Agony_锐

transform:变形

transition:过渡动画——需要触发

animation:一刷新就有动画

3d效果:transform-style:preserve-3d;



元素旋转:

1、沿Z轴旋转45度:transform: rotate(45deg);

2、沿X轴旋转45度:transform: rotateX(45deg);

3、沿Y轴旋转45度:transform: rotateY(45deg);

perspective(800px):设置透视距离(800px适合人眼效果)

负值:逆时针旋转

正值:顺时针旋转

transform:perspective(800px)rotateX(-90deg);

变形:透视距离:(800px适合人眼效果)沿X轴逆时针旋转90度

transform:perspective(800px)rotateY(180deg);

变形:透视距离:(800px适合人眼效果)沿Y轴转顺时针180度



变形中心点:


一、transition:过渡动画——需要触发

二、transform:设置变形

                样式:transform:rotate(90deg);

                可选值:rotate:Z轴转

                                rotateX:X轴转

                                rotateY:Y轴转

三、

        X:nth-child(1):匹配元素类型为X且是父元素的第一个子元素

        X:nth-child(2):匹配元素类型为X且是父元素的第二个子元素

        X:nth-child(3):匹配元素类型为X且是父元素的第三个子元素

四、tranform-origin 设置变形的中心点

设置左中为中心点:transform-origin:left center;

设置左下为中心点:transform-origin:left bottom;


背面可见:

给外面包的容器做hover

设置盒子背面不可见:backface-visibility:hidden;

设置按3D空间显示:transform-style:preserve-3d;

文字居中:text-align:center;

垂直居中:line-height:300px;


图片翻面:

水平位移:transform: translate();



上一篇 下一篇

猜你喜欢

热点阅读