zhongwen网站模板,最近新闻报道,环球资源网网站特色,自己做公司网站简单吗1、CSS3_3D变换
1.1 3D空间与景深 3D空间#xff1a;在父元素中将属性transform-style设置为preserve-3d开启3D空间#xff0c;默认值为flat#xff08;开启2D空间#xff09;#xff1b; 景深#xff1a;人眼与平面的距离#xff0c;产生透视效果#xff0c;使得效果…1、CSS3_3D变换
1.1 3D空间与景深 3D空间在父元素中将属性transform-style设置为preserve-3d开启3D空间默认值为flat开启2D空间 景深人眼与平面的距离产生透视效果使得效果更加立体。 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title3D变换与景深/titlestyle.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;transform: rotateX(30deg);}/style
/headbodydiv classouterdiv classinner示例文字/div/div
/body/html1.2 透视点的位置 透视点人眼观察的位置在父元素中设置。 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title透视点的位置/titlestyle.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;/* 设置观察点的位置在右下角观察 */perspective-origin: 500px 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;transform: rotateX(30deg);}/style
/headbodydiv classouterdiv classinner示例文字/div/div
/body/html1.3 3D位移
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title位移/titlestyle.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;/* 设置观察点的位置在右下角观察 *//* perspective-origin: 500px 200px; */}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;/* 设置Z轴距离,不能写百分比 *//* transform: translateZ(150px); *//* 设置在X、Y、Z轴的位移距离可以写百分比 */transform: translate3d(12px, 50%, 3px);}/style
/headbodydiv classouterdiv classinner示例文字/div/div
/body/html1.4 3D旋转
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title旋转/titlestyle.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;/* 设置X轴旋转角度 *//* transform: rotateX(100deg); *//* 设置Y轴旋转角度 *//* transform: rotateY(100deg); *//* 设置X、Y、Z轴旋转角度倍数 */transform: rotate3d(1, 1, 1, 30deg);}/style
/headbodydiv classouterdiv classinner示例文字/div/div
/body/html1.5 3D缩放
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title缩放/titlestyle.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;/* 设置Z轴缩放比例由于html元素没有厚度则该属性调整景深景深除以缩放的比例 */transform: scaleZ(4) rotateY(30deg);/* 设置3D缩放比例X、Y、Z轴的缩放比例 *//* transform: scale3d(2,1,1) rotateY(30deg); */}/style
/headbodydiv classouterdiv classinner示例文字/div/div
/body/html1.6 3D多重变换
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title多重变换/titlestyle.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;line-height: 200px;transform-origin: top 20px;transform: rotateX(60deg);}/style
/headbodydiv classouterdiv classinner示例文字/div/div
/body/html1.7 3D背部
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title背部/titlestyle.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;line-height: 200px;transform: rotateY(180deg);/* 设置背部不可见 */backface-visibility: hidden;}/style
/headbodydiv classouterdiv classinner示例文字/div/div
/body/html
