CS 3特効変換
Transform
4_transform.html
<div class="box"></div>
cssスタイルラベル body {
background: #333;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box {
background: white;
width: 300px;
height: 300px;
/* Transform - rotate, scale, skew */
transform: rotate(25deg);
/* transform: skew(25deg); */
/* transform: scale(2); */
/* transition: all 1s ease-in-out; */
}
.box:hover {
transform: rotate(180deg);
/* transform: skew(25deg); */
/* transform: scale(2); */
/* border-radius: 50%;
background-color: blue; */
/* transform: translateY(100px); */
/* transform: translateX(-100px); */
/* x & y */
/* transform: translate(100px, 100px); */
/* transform: translate3d(100px, 100px, 100px); */
}
実習
https://codepen.io/learnwebcode/pen/GOWxzz?editors=1100
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
Reference
この問題について(CS 3特効変換), 我々は、より多くの情報をここで見つけました
https://velog.io/@drv98/CSS3-특수효과
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<div class="box"></div>
body {
background: #333;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box {
background: white;
width: 300px;
height: 300px;
/* Transform - rotate, scale, skew */
transform: rotate(25deg);
/* transform: skew(25deg); */
/* transform: scale(2); */
/* transition: all 1s ease-in-out; */
}
.box:hover {
transform: rotate(180deg);
/* transform: skew(25deg); */
/* transform: scale(2); */
/* border-radius: 50%;
background-color: blue; */
/* transform: translateY(100px); */
/* transform: translateX(-100px); */
/* x & y */
/* transform: translate(100px, 100px); */
/* transform: translate3d(100px, 100px, 100px); */
}
https://codepen.io/learnwebcode/pen/GOWxzz?editors=1100
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
Reference
この問題について(CS 3特効変換), 我々は、より多くの情報をここで見つけました https://velog.io/@drv98/CSS3-특수효과テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol