まとめました--css 3 transition、tranform 2 d-3 d
13303 ワード
個人ブログに間違いがありましたら、ご指摘ください。ありがとうございます。
トランジスト基本書き方 複合書き方 translateX()translateY() rotate() scale() skw() 方向を判断する方法: transform-style:preserve-3 d 3 dもし3 dの視覚が必要なら、さらにtranform-styleを追加する必要があります。 transform-origgin:left centerこれはtranform変換を制御する円点 である。
テクニック:
3 dには裏側が見えない場合があります。
トランジスト
/* all */
transition-property: width,height;
/* */
transition-duration: 2s;
/* */
transition-delay: 1s,2s;
/*
linear
ease-in
ease-out
...
transition
ease
*/
transition-timing-function: ease;
, all, height ,
transition: width 1s 1s linear,
height 1s 2s ease,background-color 1s 3s;
tranform 2 dtransform: translate(10px, 20px) */
transform: translateX(20px) translateY(20px);
transform: rotate(360deg);
/*
scaleX
scaleY
*/
transform: scale(.5, .5);
transform: skew(0,45deg );
tansform 3 d x :
y :
z : ;
3d
3d
Z
.container{
border: 1px solid gray;
overflow: hidden;
/* */
perspective: 1000px;
}
テクニック:
3 dには裏側が見えない場合があります。
/* */
backface-visibility: hidden;
デモ:3 d小箱の効果TYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
/* 3d */
perspective: 500px;
}
.box{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid gray;
position: relative;
transition: all 1s;
/* 3d 3d */
transform-style: preserve-3d;
}
.box .item{
width: 100%;
height: 100%;
font-size: 150px;
text-align: center;
line-height: 200px;
font-weight: 900;
position: absolute;
}
.item:nth-child(1){
background: orange;
transform: rotateY(0deg) translateZ(100px);
}
.item:nth-child(2){
background: red;
transform: rotateY(180deg) translateZ(100px);
}
.item:nth-child(3){
background: blue;
transform: rotateY(90deg) translateZ(100px);
}
.item:nth-child(4){
background: pink;
transform: rotateY(-90deg) translateZ(100px);
}
.item:nth-child(5){
background: green;
transform: rotateX(90deg) translateZ(100px);
}
.item:nth-child(6){
background: yellowgreen;
transform: rotateX(-90deg) translateZ(100px);
}
/* */
.box:hover{
transform: rotateX(450deg) rotateY(450deg);
}
style>
head>
<body>
<div class="box">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
<div class="item">4div>
<div class="item">5div>
<div class="item">6div>
div>
body>
html>